Integrating HTML editing with FCKEditor

HTML Editing Overview

Many applications can benefit from HTML supplied by users. For example, an Announcements channel or Classifieds channel is much more functional if users can supply links and images in their descriptions.

A number of open source editors are available to convert HTML textareas into HTML editors. One of the most popular is the FCKEditor. FCKEditor supplies all the normal editing and styling functions (bold, color, justification, etc.) but also include the ability to insert images, links and other objects.

The one downside to these editors is that they depend on the browser support content-editing. Both IE and Mozilla browsers like Firefox fit into this category, but until May 2005, Safari and other KHTML browsers did not. Version 1.3 of Safari just announced content editing although FCKEditor has not yet had time to develop a KHTML version. Hopefully within the next year, FCKEditor will be functional on almost all platforms.

Installing the Basic FCKEditor

You can download FCKEditor (Currently 2.0 FC) from the above FCKEditor site. It is essentially a directory full of Javascript, CSS and image resources to implement the editor. To install in the portal, unzip the downloaded copy and move to your portal installation in the main directory. For example, on Tomcat, this might be in webapps/uPortal/fckeditor. I would keep a copy of this whole directory structure in a different area, but you can remove all directories that begin with an underscore.

I recommend that you make a copy of the fckconfig.js file and put it in the same directory (in the examples below I use myconfig.js). This files lets you set base directories, menu options and a variety of other options to customize the editor for different applications.

Finally, create a textarea out of HTML as you normally would, making sure that you give it a name for both the ID and name attributes of the text area. Immediately after this, include Javascript like the following:

<textarea id="myeditor" name="myeditor" wrap="virtual/>

<script type="text/javascript">
    var name = 'myeditor';
    var base_url = window.location.href;
    base_url = base_url.substring(0,base_url.indexOf('/tag.'));
    var editor = new FCKeditor(name,'100%','400','Default') ;
    editor.BasePath= base_url + '/fckeditor/';
    var worker_url = '<xsl:value-of select="$baseWorkerURL"/>';
    editor.Width = '400px';
    editor.Height = 400px';
    editor.Config['BaseHref'] = base_url + '/' + worker_url + '<xsl:value-of select="$base"/>';
    editor.Config['CustomConfigurationsPath'] = editor.BasePath + 'myconfig.js';
    var link_url = worker_url + '&amp;ServerPath=<xsl:value-of select="$base"/>';
    var image_url = link_url + '&amp;Type=Image';
    image_url = image_url.replace(/amp;/gi,'');
    link_url = link_url.replace(/amp;/gi,'');
    editor.Config['ImageBrowserURL'] = editor.BasePath +     
        'editor/filemanager/browser/default/browser.html?Connector=../../../../../' + image_url;
    editor.Config['LinkBrowserURL'] = editor.BasePath +     
        'editor/filemanager/browser/default/browser.html?Connector=../../../../../' + link_url;
    editor.ReplaceTextarea() ;
</script>

Note that there are a number of configuration parameters that can be set globally in your myconfig.js or locally for each editor as shown here.

Customizations to the Basic Editor

FCKEditor provides for a large number of customizations. For example, in myconfig.js you can control the menu options that appear:

FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
	['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','UniversalKey','Comment'/*,'Placeholder'*/],
	//['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
	['TextColor','BGColor'],
	['About'],
	'/',
	['Style','FontFormat','FontName','FontSize']
] ;

FCKConfig.ToolbarSets["Basic"] = [
	['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

A simple and fully-loaded toolbar set are defined above. I have commented out the form options because my users don't need them for building simple HTML. However, you can choose which icons to include on the tool bar. Each array is a collection of tools that are grouped together. The dash give some space between them. You specify the toolbar in the new FCKEditor function (see previous Javascript example).

Initial fonts, pulldown items and colors can all be specified in this file.

Image and Link Browsing

Adding Plugins