Jump to main navigation


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...'.

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.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 comments to “DynamicToolbar plugin for FCKEditor”

  1. #01 By natalia, 080407 at 18:45

    Is that so for example the comments thing can add tags using buttons?

  2. #02 By dense13, 080407 at 21:35

    Not really. Well, you could use it there (assuming you're using FCKEditor for the comments), but you don't need a dynamic toolbar for that: you could just define a custom toolbar in the config file, and then use it for the comments.

    This plugin is useful if you need to create the toolbar for FCKEditor on-the-fly. For example, imagine you're developing a CMS, and you want to let the user of the CMS select which buttons to use in FCKEditor. Because you don't know which buttons will he choose, you can't hard-code the toolbar in the config file, and here's when DynamicToolbar comes into play.

    Clear as mud? ;)

  3. #03 By kalyan, 080603 at 22:45

    if i have to add a new plug-in to the already existing plug-ins of fck editor, what should i do? what are the code changes to be implemented?

  4. #04 By dense13, 080604 at 09:56

    Hi kalyan. It's not difficult, but there are a few steps involved, and it can be a bit confusing the first time. I can't go through the details right now, but will try to write a post about it soon. If you can't wait, a google search on "fckeditor add plugin" should point you in the right direction.

  5. #05 By Peter, 080623 at 23:54

    Hello, I want to add a new button toolbar then when this toolbar
    clicked I want to open new normal window browser. Is it possible to
    use your plugin? Thanks

  6. #06 By dense13, 080624 at 10:55

    Hi Peter. I'm not sure what you're trying to do, but I don't think this plugin will help you. It seems to me you need a plugin to open the new window (I don't know if there is one).

  7. #07 By Spitfire, 090804 at 07:17

    Hi! I want add my own button to my own toolbar, and set event
    handler to this button. How i can do this? That possible with this
    plugin?

  8. #08 By dense13, 090811 at 22:28

    This is not what this plugin is about, sorry. The FCKEditor documentation has some info on how to do that, I think. Btw, you might want to wait a little bit more until the final release of CKEditor, which is the replacement for FCKEditor and is due soon.

  9. #09 By Mohit, 100309 at 17:53

    I did the same thing as described above. Install the plugin and try
    to use it in my php page. But it gives me such javascript alert
    "Toolbar set "DynamicToolbar" doesn't exist".

  10. #10 By dense13, 100309 at 18:16

    Mohit: this is probably a problem related to step 2 in the installation instructions above. Where are you adding the FCKConfig.Plugins.Add('DynamicToolbar', null); bit?

    Btw, I'd highly recommend using CKEditor instead of FCKEditor, which already has an inbuilt mechanism to create dynamic toolbars.

Add a comment


Allowed XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <p> <strike> <strong>


To prove you're a person (not a spam script), type the answer to the math equation shown in the picture. Click on the picture to hear an audio file of the equation.
Click to hear an audio file of the anti-spam equation =

Additional content and navigation

Categories

Main navigation menu