Genii Weblog

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:

Default toolbar for FCKEditor


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:

Custom toolbar for FCKEditor

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.

What has been said:


323.1. mika
(03.07.2005 13:35)

Just what I was looking for. Great! Thank you!


323.2. thangTV
(03/28/2006 09:25 AM)

very good


323.3. anuj
(06/22/2006 03:26 AM)

it's simply great


323.4. Rahul
(04/23/2007 07:23 AM)

Its very good.

I wanted to know more about the apporach one should have edit fckeditor js files according to our needs.

I was facing a problem when I was creating multiple instances of fckeditor and showing one of these.

Toolbar icons were covered by blank spaces. On mouseover icons appear.

How should I go abt it.

Thanks


323.5. shaimaa
(08/06/2007 02:33 AM)

this is very good, but i have an alert on internet explorer saying unknown toolbar item "undefined" although i have cleared the cache, have any one a solution for this probelm ?

thank you


323.6. amit_2006_it
(12/19/2007 03:02 AM)

Hi Ben,

Nice Tutorial.

But the changes made in fckconfig.js file, do not reflect over fckeditor.

Thx


323.7. Jeferson Nascimento
(30/10/2008 12:28)

changes made in fckconfig.js file, do not reflect over fckeditor..

:(

using vs2008 in asp.net and development under windows vista.