FCKEditor – ToolbarSets

This function determines what functions will be available to access from the toolbar. It also points out their arrangement on the toolbar. The syntax of the function
* Functions are divided into sections by placing them inside square brackets ” [ ] “.
['Source']
* You may separate functions inside the section by putting a ” ‘-’ ” sign beside them. It will appear as an pipe (|) in the toolbar.
['Source','-','DocProps']
* If you want to start a new line with functions put ” ,’/', ” between the section.
['Source','-','DocProps'], ‘/’, ['Bold','Italic']
* Remember there is no comma after the last row.
Full Code:
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.
] ;
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
var oFCKeditor = new FCKeditor( ‘FCKeditor1′ ) ;
oFCKeditor.ToolbarSet = ‘MyToolbar’ ;
oFCKeditor.Create() ;
PHP
$oFCKeditor->ToolbarSet = ‘MyToolbar’;
JSP (Java)
ASP
oFCKeditor.ToolbarSet = “MyToolbar”
ASP.NET
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;
source :
- http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options/ToolbarSets
- http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration/Toolbar