Line 76: | Line 76: | ||
<pre>fckEditor.toolbarSet = "MyToolbar"; | <pre>fckEditor.toolbarSet = "MyToolbar"; | ||
</pre> | </pre> | ||
− | + | ||
+ | === Toolbar Collapsion and Expanding === | ||
+ | |||
+ | You can easily determine how the toolbar will appear in the editor. 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 [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/ToolbarStartExpanded|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: | ||
+ | <pre> | ||
+ | FCKConfig.ToolbarStartExpanded = true ; | ||
+ | </pre> |
Revision as of 11:41, 16 January 2008
Contents
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 id="EditorDefault" toolbarSet="MyToolbar"></FCK:editor>
ASP
oFCKeditor.ToolbarSet = "MyToolbar"
ASP.NET
<FCKeditorV2:FCKeditor id="FCKeditor2" ToolbarSet="MyToolbar" runat="server" />
ColdFusion
fckEditor.toolbarSet = "MyToolbar";
Toolbar Collapsion and Expanding
You can easily determine how the toolbar will appear in the editor. 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 ;