CKSource

Toolbar Configuration

It's quite easy to customize the toolbar buttons to your needs. Just edit the configuration file and modify or add new items to the "FCKConfig.ToolbarSets" configuration entry or create this entry in your FCKeditor 2.x/Developers Guide/Configuration/Configuration File/custom configuration file.

Take a look at the fckconfig.js file to see these two sample toolbarsets definitions:

FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

Toolbar Bands

Every ToolBarSet is composed of a series of "toolbar bands" that are grouped in the final toolbar layout. The bands items move together on new rows when resizing the editor.

As you can see in the above toolbarsets definitions, every toolbar band is defined as a separated JavaScript array of strings. Every string corresponds to an available toolbar item defined in the editor code or in a plugin. If the toolbar item doesn't exist, a message is displayed when loading the editor.

You can also include a separator in the toolbar band by including the "-" string on it.

Forcing Row Break

Looking at the "Default" ToolBarSet you will note that in one of the rows you have a "/" string instead of an array. This slash can be used to tell the editor that you want to force the next bands to be rendered in a new row and not following the previous one.

Custom ToolBarSets

The editor comes with the "Default" and "Basic" ToolBarSets already defined in the fckconfig.js file. You can modify them, but you can also create new customized ones. For example, to create a toolbarset named "MyToolbar", just include the following in the configuration file or in your FCKeditor 2.x/Developers Guide/Configuration/Configuration File/custom configuration file:

FCKConfig.ToolbarSets["MyToolbar"] = [
        ['Cut','Copy','Paste','PasteText','PasteWord'],
        ['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
        '/',
        ['OrderedList','UnorderedList','-','Outdent','Indent'],
        ['Link','Unlink','Anchor'],
        '/',
        ['Style'],
        ['Table','Image','Flash','Rule','SpecialChar'],
        ['About']
] ;

Now you just need to set your ToolBarSet when creating an editor instance. Below you will find examples how to do it in different server side languages:

JavaScript

<script type="text/javascript">
        var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
        oFCKeditor.ToolbarSet = 'MyToolbar' ;
        oFCKeditor.Create() ;
</script>

PHP

$oFCKeditor->ToolbarSet = 'MyToolbar';

JSP (Java)

<FCK:editor id="EditorDefault" toolbarSet="MyToolbar"></FCK:editor>

ASP

oFCKeditor.ToolbarSet = "MyToolbar"

ASP.NET

<FCKeditorV2:FCKeditor id="FCKeditor2" ToolbarSet="MyToolbar" runat="server" />

ColdFusion

fckEditor.toolbarSet = "MyToolbar";

</pre>