Latest revision as of 22:28, 5 July 2008

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 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 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 instanceName="EditorDefault" toolbarSet="MyToolbar" />

ASP

oFCKeditor.ToolbarSet = "MyToolbar"

ASP.NET

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

ColdFusion

fckEditor.toolbarSet = "MyToolbar";

Additional information

• It's a common mistake when customizing the toolbar, to just remove some elements from the Default toolbar set, including the "About" item, leaving the last row terminating with a comma (","). So, remember that the last toolbar band doesn't have a comma after it.
• Remember to clean up your browser's cache when making changes to the configuration file, otherwise you may not see your changes and will simply not understand why.

Toolbar Behavior

On start behavior

You can easily determine how the toolbar will appear when the editor starts runing. The toolbar can appear expanded (in maximized mode) or collapsed (in minimized mode). If you want change the appearance of the toolbar you should look throughout ToolbarStartExpanded option or just insert the following code into the configuration file remembering that 'true' sets the toolbar to expanded mode and 'false' sets it to collapsed mode:

FCKConfig.ToolbarStartExpanded = true ;

Toolbar Collapsing

You can choose whether the user can collapse (minimize) the toolbar, during work with the editor, or not. Just see the ToolbarCanCollapse option or apply this entry in the configuration file remembering that 'true' gives the permission to collapse the toolbar and 'false' doesn't:

FCKConfig.ToolbarCanCollapse = false;