Customizing the FCKeditor Tool Bar in ColdFusion - CFTextArea

The configuration file is generally located on the server at /CFIDE/scripts/ajax/FCKeditor/fckconfig.js and there is a "Default" and "Basic" configuration built in. These are referenced in the cftextarea tag with the "toolbar" parameter as in:

Note in the example above that we are that we are passing in the data with the "s_det" variable and the cftextarea tag uses pixels to size the form element instead of the HTML textarea form element rows and cols attributes. You can define additional toolbar sets in this file. The "Basic" definition below is defined in the "fckconfig.js" file (see below).

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

We use a custom set of tools in our Toolbar for the Article Advocates as follows:

FCKConfig.ToolbarSets["MyToolBar"] = [
 ['SpecialChar','Bold','Italic','Underline','Subscript','Superscript','SpellCheck','Link'],
 ['OrderedList','UnorderedList','Outdent','Indent'],
 ['TextColor','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['FontFormat','FontName','FontSize','TextColor']
] ;

Note that the '-' provides verticle line within the toolbar items and the '/' creates line break. Also, the brackets encompasing the list of tools creates logical sections so that if you remove the line breaks ('/'), the line breaks will occur naturally around the bracket groups as they fit within the editor, so that several groupings may appear on one line.

The call to this toolbar from the cftextarea tag would be:

Another technique you can use to customize the toolbar in cases where you don't have access to the fckconfig.js file, is to define the toolbar after the page has loaded. We will use the MyToolBar example above. You can put the following code in the page with the form.

The default or basic tool bar will load, and then be replaced by MyToolBar as defined above. This later technique has solved a lot of issues for us since the FCKeditor became available with ColdFusion in cases where we work with websites on shared servers. I hope you find this useful.

Note that the predefined "Default" toolbar has a complete set of options available for the editor. You can grab these and define just the tools you want within your custom toolbar.

FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;