We've built a website using TKL and it was my hope to get more people contributing so making the html editor function better was something that I wanted to do.

Well I finally got around to it and I've integrated the open source FCKeditor? into the xform. I actually did it a month or so ago and I'm

starting to forget what I did so I thought I'd better skectch some notes.

Thought others might be interested. Here goes.

What I did

  • Created a directory for the editor software to reside;

    (I made mine fckeditor at my web root)

  • Created a directory for local customization file;

    (I made mine fck-local at the web root)

  • Created config.js file;

    This file overrides the defaults in the file fckconfig.js in the installaiton directory. (I'm no expert on all the options but these work for me.)

  • Created an html file that loads the editor and the form field contents;

  • Change the tklite/admin/xform.js file to call the above html file;

Config Notes

If you don't put the software at the root (the default) you need to set your BasePath?,

  • HTML enties are handled by the web form so you need to turn them off in the editor;

  • The second line keeps the editor from creating empty elements;

  • next line controls what gets shown in the menubar. (I took out some items but left in lots)

  • the editor has file upload capabilites and this just chooses php to do that

    kind of work (the other choice is asp)

--------------- content of my config.js -------------------------------

FCKConfig.ProcessHTMLEntities  = false ;
FCKConfig.FillEmptyBlocks = false;
FCKConfig.ToolbarSets["Default"] = [

] ;
FCKConfig.FontFormats  = 'p;div;pre;address;h1;h2;h3;h4;h5;h6' ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/php/connector.php' ;
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php' ;
FCKConfig.FlashBrowser = false ;
FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/php/upload.php' ;
FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/php/upload.php?Type=Image' ;
FCKConfig.FlashUpload = false ;

----------- contents of my fcedit.html ----------------------------------

   &lt;disabled script type="text/javascript" src="/fckeditor/fckeditor.js"&gt;&lt;disabled /script&gt;
   &lt;disabled script type="text/javascript"&gt;

     var formid = ""
     var fieldid = ""

     function create_request_object() {
     Source: Webmonkey Code Library
     Author: Patrick Corcoran
     Author Email: patrick@taylor.org

       form_data = new Object();
       separator = ',';
       query = '' + this.location;
       query = query.substring((query.indexOf('?')) + 1);

       if (query.length < 1) {
         return false;

       keypairs = new Object();
       numKP = 1;

       while (query.indexOf('&') > -1) {
         keypairs[numKP] = query.substring(0,query.indexOf('&'));
         query = query.substring((query.indexOf('&')) + 1);
       // add the remaining part of the query string to the keypairs object
       keypairs[numKP] = query;

       for (i in keypairs) {
         keyName = keypairs[i].substring(0,keypairs[i].indexOf('='));
         keyValue = keypairs[i].substring((keypairs[i].indexOf('=')) + 1);

         while (keyValue.indexOf('+') > -1) {
           keyValue = keyValue.substring(0,keyValue.indexOf('+')) +
             ' ' + keyValue.substring(keyValue.indexOf('+') + 1);

         keyValue = unescape(keyValue);

         if (form_data[keyName]) {
           form_data[keyName] = form_data[keyName] + separator + keyValue;
         else {
           form_data[keyName] = keyValue;

       return form_data;

function get_content() {
       request = create_request_object();
       formid = request['formid'];
       fieldid = request['fieldid'];
       initialContent = this.opener.document[formid][fieldid].value;
       return initialContent;

     function update_content(){
       oEditor = FCKeditorAPI.GetInstance('editor') ;
       theContent = oEditor.GetXHTML("true");
       this.opener.document[formid][fieldid].value = theContent;

&lt;disabled /script&gt;
 <body onload="get_content()">
   <form name="editor" action="" method="POST">
     &lt;disabled script type="text/javascript"&gt;
       initialContent = get_content()
       oEditor = new FCKeditor("editor", "100%", "600", "Default", initialContent);
       oEditor.Config['CustomConfigurationsPath'] = '/fck-local/config.js'  ;
       &lt;disabled /script&gt;
       <br /><input type="button" value="Submit" onclick="update_content()"/>

What we've learned

Not handling enties was the biggest thing. This works for us but it may be a stumbling block for others. The editor outputs well formed xhtml very well. We haven't stressed it and I haven't really taken time to learn how it works but so far I haven't had too ;-)