Customizing the FCKEditor toolbar
Mon 6 Jun 2005, 05:03 PM
by Ben Langhinrichs
As a large CoexEdit customer is starting its plan to roll out the product, the question has come up of how to customize the toolbar that comes with FCKEditor, the rich text editor they have chosen as the web side of the Notes/Web coexistence (they are using Notes 6 as the Notes side). While this obviously isn't part of CoexEdit itself, I imagine this will be a common request, so I thought I'd outline how it works. In a future post, I'll describe the same kind of customization with TinMCE and Xina/htmlArea.
Static configuration for FCKEditor is mostly stored in a file called fckconfig.js which is directly under the FCKEditor directory. Any customization that will be universal should be added here. There are many configuration variables, but the one I will show is called FCKConfig.ToolbarSets. When you install directly from the FCKEditor website, there are two pre-installed sets, "Default" and "Basic", shown below:
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'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['About']
;
which looks like:
FCKConfig.ToolbarSets["Basic"] =
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
;
You could modify these and use the modified versions, but I would recommend against that. It would make it very difficult to see what had changed in a subsequent release of FCKEditor. Instead, for our next patch release, we are going to create our own named toolbarset called "CoexEdit":
FCKConfig.ToolbarSets["CoexEdit"] =
['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'],
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['About']
;
which looks like:
It does not have the form and checkbox and such controls, which don't make much sense in this sort of rich text editing. The lone '/' is a newline character, which we won't need with the reduced set of tools. Note that while I am suggesting a single new toolbarset, you could easily define these based on roles, so "Student" and "Professor" and "Staff" could be options, or "CopyClerk" and "Editor", or whatever roles make sense.
Having created the new toolbarset, it is now time to use the dynamic configuration feature of FCKEditor, which is through the class properties of the FCKEditor class on the form or subform where it is used. In the FCKEditor with CoexEdit sample db on our website, this is implemented in the FCKEditorSubform in the computed text at the bottom. The existing code is:
"var oFCKeditor = new FCKeditor( 'BodyWeb' ) ;"+br+
"oFCKeditor.BasePath = '/FCKeditor/' ;"+br+
"oFCKeditor.Value = window.document.all.Content.innerHTML;"+br+
"oFCKeditor.Height= '400' ;"+br+
"oFCKeditor.Create() ;"+br+
and changing the toolbar set is as easy as adding the line below (in bold):
"var oFCKeditor = new FCKeditor( 'BodyWeb' ) ;"+br+
"oFCKeditor.BasePath = '/FCKeditor/' ;"+br+
"oFCKeditor.Value = window.document.all.Content.innerHTML;"+br+
"oFCKeditor.ToolbarSets = 'CoexEdit';"+br+
"oFCKeditor.Height= '400' ;"+br+
"oFCKeditor.Create() ;"+br+
Since this is computed text, you could also use the @UserRoles function to determine which role a user was in, so that different people editing the same document with different roles would see different toolbars. I wish Notes were so flexible.
Copyright © 2005 Genii Software Ltd.
