One of the neat features of FCKEditor is the ability to assign your own custom toolbar set. The question to ask is, "Why would I want to have a custom toolbar set?" After all, to most users the basic, standard, and advanced toolbar sets offer plenty, right? Well, some users may prefer to hide just one or two items from a specific set. Or a user may prefer to have the buttons in a particular order. A custom toolbar set allows you to do this and it’s relatively easy to do once you understand how button assignments work in FCKEditor.
To get an idea on how toolbars work in FCKEditor, it’s good to look at how the existing default toolbars are assigned. In the folder for the FCKEditor plugin (located at assets/plugins/fckeditor) there’s a file called custom_config.js. In this file are sections for the basic, standard and advanced toolbars. Let’s look at the basic one first since it’s the easiest one to understand. The line should look like this:
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','Image']
The whole section is one block of buttons with each button name in single quotes separated by commas and enclosed by brackets. A separator can be used by adding a dash in single quotes. The above button block has two separators. If you plan on having quite a few buttons, it’s recommended that you create multiple blocks for the purpose of allowing FCKEditor to span blocks of buttons for times when the width is relatively small. One large block of buttons will cause FCKEditor to not show some buttons. For example, take a look at the following block:
['Bold','Italic','Underline','-','Link','Anchor','-','Image','Flash','Table','Rule','SpecialChar','-','Style','FontFormat','FontName','FontSize','-','TextColor','BGColor']
This is quite a few buttons for just one block. The result of this block will be that most of the buttons on the right of the toolbar will not show up and the toolbar will be cutoff. To alleviate this, simply create multiple blocks with brackets separated by commas like this:
['Bold','Italic','Underline'],['Link','Anchor'],['Image','Flash','Table','Rule','SpecialChar'],['Style'],['FontFormat'],['FontName'],['FontSize'],['TextColor','BGColor']
You’ll notice that I purposely made the Style, FontFormat, FontName, and FontSize buttons as separate blocks. The reason for this is because these particular buttons are actually dropdown menus and can sometimes be cutoff if they are grouped together. As separate blocks, FCKEditor will span a block to a new row should they not fit the width of the editor.
Take a look at both the standard and the advanced toolbar instances in the custom_config.js file to get an idea on how the existing toolbars are setup. With these, you should be able to easily create your own toolbar by rearranging the button names, blocks, and such to fit your needs.
To add a custom toolbar set, simply navigate to System Configuration / Interface & editor settings page. In the FCKEditor Settings section, select ’Custom’ from the Toolbar Set dropdown box. A new text field labeled ’Custom toolbar’ will appear just below. Here, you can enter or paste in your own toolbar settings using the same methods as described above. Should you have any questions, feel free to post them here!
Happy coding!
Jeff
MODX Staff
