DynamicToolbar plugin for FCKEditor

080406

DynamicToolbar is a plugin for FCKEditor that allows you to create custom toolbars on-the-fly, without the need to use configuration files. This won't be necessary once FCKEditor reaches v3.0, but for the moment, here's a quick and easy solution.

Download DynamicToolbar for FCKEditor

Current version: 1.1. Right click and 'Save link as...'.

• DynamicToolbar plugin for FCKEditor

This version has been tested with FCKEditor 2.6.3. If you have any problems installing it, feel free to ask in the comments.

Installation instructions

1. Unzip and copy the DynamicToolbar folder to your FCKEditor plugins folder (see note 1 below).
2. Add the following code to your fckconfig.js file (see note 2 below).

   FCKConfig.Plugins.Add('DynamicToolbar', null);
   

3. The plugin is ready to use, all you need to do is create the toolbar on the go, in the SCRIPT element of the html file where you're creating the FCKEditor instance, for example:

   var myFCKObject = new FCKeditor('someId');
   myFCKObject.Config['DynamicToolbar_buttons'] = "Bold,Italic,-,RemoveFormat+Link,Unlink|SelectAll";
   myFCKObject.ToolbarSet = 'DynamicToolbar';
   

   (see 'Usage' below for a detailed explanation)

Usage

As you can see in the code above, there's two things you need to do to use the custom toolbar: set the desired buttons and assign 'DynamicToolbar' as the ToolbarSet. To set the buttons, you need to assing a specially formatted string to the 'DynamicToolbar_buttons' configuration option. The syntax of this string is quite simple:

• Use the button id as you would do if defining a toolbar in the FCKEditor config file.
• Use comma (,) for consecutive buttons.
• Use plus (+) to separate blocks (they will be shown in the same row, if there's enough room).
• Use dash (-) to add a separator (note that you need to use commas before and after the dash).
• Use pipe (|) to start a new row.

Here's an example:

// The string for DynamicToolbar
myFCKObject.Config['DynamicToolbar_buttons'] = "Bold,Italic,-,RemoveFormat+Link,Unlink|SelectAll";

// The equivalent in the FCKEditor config file would be:
FCKConfig.ToolbarSets["MyToolbar"] = [
   ['Bold','Italic','-','RemoveFormat'],
   ['Link','Unlink'],
   '/',
   ['SelectAll']
] ;

Additional notes

Note 1: by default the plugins folder is fckeditor/editor/plugins/, but you can choose to use any folder you want. If you chose to not use the default one, remember to change FCKConfig.PluginsPath in fckconfig.js .

Note 2: if you want, you can use your own FCKEditor config file instead of fckconfig.js . If you choose to do so (which is a good idea), make sure you change FCKConfig.CustomConfigurationsPath in fckconfig.js, or set it in the HTML using myFCKObject.Config['CustomConfigurationsPath'].

Version history

• v1.1: removed a JS error when loading the plugin but not setting FCKConfig['DynamicToolbar_buttons'].
• v1.0: initial release.

Posted in: English, Web, FCKEditor
Tags: programming