Toolbar Customization
(Revised: 03/08/2003)

The FCKeditor toolbar can be easily customized. You can easily define what toolbar options are available and even create your custom actions. All you have to do is configure the fck_config.js file toolbar sets.


Configuration File

The file js/fck_config.js holds all configurations and user customizations for the editor. Here you can define all available toolbar sets and its definitions. Use the “ToolbarSets ” configuration option to do that.

A toolbar set is a group of toolbar items that can be used by a FCKeditor instance. The editor package comes with 3 sample toolbar sets: Default, Accessibility and Basic. You can modify or add as many toolbar sets as you want.

Let’s take a look at the “ToolbarSets” configuration option:

  config.ToolbarSets["ToolBarSetName"] = [        // Toolbar Name
      ['Item 1','Item 2','-','Item 3','Item n'],  // 1st Band
      ['Item 4','-','Item 5','Item 6','Item n']   // 2nd Band
  ] ;
As you can see you can add as many toolbar bands as you want. Use a minus (-) to create a separator.

The toolbar items, in the same way, are defined in the js/fck_toolbaritems.js file. Until the actual version of the editor, these are the available items names:

Cut      Bold      Undo
Copy Italic Redo
Paste Underline InsertOrderedList
SelectAll StrikeThrough InsertUnorderedList
RemoveFormat Subscript FontStyle
Link Superscript FontFormat
Unlink JustifyLeft Font
Image JustifyCenter FontSize
Table JustifyRight TextColor
Rule JustifyFull BGColor
SpecialChar Outdent EditSource
About Indent


Using the Toolbar Set

All language integration functions allow the developer to set what toolbar set to use for each FCKeditor instance.

In Javascript call the CreateFCKeditor function to create an editor instance passing the desired ToolbarSet name as a parameter. The function syntax is: 
  CreateFCKEditor(instanceName, width, height, toolbarSetName, initialValue) ;
This is a sample that uses “MyToolbar” as the toolbar set to be loaded:
  <SCRIPT language="javascript">
  <!--
      CreateFCKEditor('MyEditor','100%',150,'MyToolbar','This is a <B>sample</B>.') ;
  -->
  </SCRIPT>
If toolbarSetName is null, the "Default" toolbar set is loaded.