Everyone,

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"] = [
       ['Source','DocProps','-','Save','NewPage','-','Templates'],
       ['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
       ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
       ['OrderedList','UnorderedList','-','Outdent','Indent'],
       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
       ['Link','Unlink','Anchor'],
       ['Image','Table','Rule','Smiley','SpecialChar'],

['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
       '/',
       ['Style','FontFormat','FontName','FontSize'],
       ['TextColor','BGColor'],
       ['About']
] ;
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 ----------------------------------

<html>
 <head>
   &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
     (http://www.hotwired.com/webmonkey/javascript/code_library/parse_get)
     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);
         numKP++;
       }
       // 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;
       window.close();
     }

&lt;disabled /script&gt;
 </head>
 <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'  ;
       oEditor.Create();
       &lt;disabled /script&gt;
       <br /><input type="button" value="Submit" onclick="update_content()"/>
     </form>
   </body>
 </html>

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 ;-)