FCKeditor 2.x/Developers Guide/Configuration/Toolbar - Revision history

Mosipov at 21:28, 5 July 2008

2008-07-05T21:28:19Z

W.olchawa at 10:52, 16 January 2008

2008-01-16T10:52:49Z

W.olchawa at 10:50, 16 January 2008

2008-01-16T10:50:55Z

W.olchawa at 10:41, 16 January 2008

2008-01-16T10:41:03Z

W.olchawa at 10:29, 16 January 2008

2008-01-16T10:29:39Z

W.olchawa at 10:26, 16 January 2008

2008-01-16T10:26:18Z

W.olchawa at 10:18, 16 January 2008

2008-01-16T10:18:24Z

W.olchawa: New page: == 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" con...

2008-01-16T10:12:44Z

New page: == 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" con...

New page

== 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 config file..

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

@@ Line 64: / Line 64: @@
 <pre>$oFCKeditor-&gt;ToolbarSet = 'MyToolbar';
 </pre>
-==== JSP (Java) ====
+==== JSP (Java)  ====
-<pre>&lt;FCK:editor id="EditorDefault" toolbarSet="MyToolbar"&gt;&lt;/FCK:editor&gt;
+<pre>&lt;FCK:editor instanceName="EditorDefault" toolbarSet="MyToolbar" /&gt;
 </pre>
 ==== ASP ====
 <pre>oFCKeditor.ToolbarSet = "MyToolbar"

@@ Line 76: / Line 76: @@
 <pre>fckEditor.toolbarSet = "MyToolbar";
 </pre>
-=== Toolbar Behavior ===
+* 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.
-==== On start 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 [[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&nbsp;;
 </pre>
-==== Toolbar Collapsing ====
+=== Toolbar Collapsing ===
 You can choose whether the user can collapse (minimize) the toolbar, during work with the editor, or not. Just see the [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/ToolbarCanCollapse|ToolbarCanCollapse]] option or apply this entry in the configuration file remembering that 'true' gives the permission to collapse the toolbar and 'false' doesn't:
 <pre>FCKConfig.ToolbarCanCollapse = false;
 </pre>

@@ Line 77: / Line 77: @@
 </pre>
-=== Toolbar Collapsion and Expanding ===
+=== Toolbar Behavior ===
-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:
+==== On start behavior ====
 <pre>
-FCKConfig.ToolbarStartExpanded = true ;
+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 [[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>

@@ Line 76: / Line 76: @@
 <pre>fckEditor.toolbarSet = "MyToolbar";
 </pre>
-&lt;/pre&gt;

@@ Line 1: / Line 1: @@
 == 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 "[[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/ToolbarSets|FCKConfig.ToolbarSets]]" configuration entry or create this entry in your [[FCKeditor 2.x/Developers Guide/Configuration/Configuration File/custom configuration file]].
+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 "[[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/ToolbarSets|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:
@@ Line 39: / Line 39: @@
 === 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]]:
+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]]:
-<pre>
+<pre>FCKConfig.ToolbarSets["MyToolbar"] = [
-FCKConfig.ToolbarSets["MyToolbar"] = [
+['Cut','Copy','Paste','PasteText','PasteWord'],
-        ['Cut','Copy','Paste','PasteText','PasteWord'],
+['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
-        ['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
+'/',
-        '/',
+['OrderedList','UnorderedList','-','Outdent','Indent'],
-        ['OrderedList','UnorderedList','-','Outdent','Indent'],
+['Link','Unlink','Anchor'],
-        ['Link','Unlink','Anchor'],
+'/',
-        '/',
+['Style'],
-        ['Style'],
+['Table','Image','Flash','Rule','SpecialChar'],
-        ['Table','Image','Flash','Rule','SpecialChar'],
+['About']
-        ['About']
+]&nbsp;;
-] ;
+</pre>
 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 ====
-<pre>
+<pre>&lt;script type="text/javascript"&gt;
-<script type="text/javascript">
+var oFCKeditor = new FCKeditor( 'FCKeditor1' )&nbsp;;
-        var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
+oFCKeditor.ToolbarSet = 'MyToolbar'&nbsp;;
-        oFCKeditor.ToolbarSet = 'MyToolbar' ;
+oFCKeditor.Create()&nbsp;;
-        oFCKeditor.Create() ;
+&lt;/script&gt;
-</script>
+</pre>
 ==== PHP ====
-<pre>
+<pre>$oFCKeditor-&gt;ToolbarSet = 'MyToolbar';
-$oFCKeditor->ToolbarSet = 'MyToolbar';
+</pre>
 ==== JSP (Java) ====
-<pre>
+<pre>&lt;FCK:editor id="EditorDefault" toolbarSet="MyToolbar"&gt;&lt;/FCK:editor&gt;
-<FCK:editor id="EditorDefault" toolbarSet="MyToolbar"></FCK:editor>
+</pre>
 ==== ASP ====
-<pre>
+<pre>oFCKeditor.ToolbarSet = "MyToolbar"
-oFCKeditor.ToolbarSet = "MyToolbar"
+</pre>
 ==== ASP.NET ====
-<pre>
+<pre>&lt;FCKeditorV2:FCKeditor id="FCKeditor2" ToolbarSet="MyToolbar" runat="server" /&gt;
-<FCKeditorV2:FCKeditor id="FCKeditor2" ToolbarSet="MyToolbar" runat="server" />
+</pre>
 ==== ColdFusion ====
-<pre>
+<pre>fckEditor.toolbarSet = "MyToolbar";
-fckEditor.toolbarSet = "MyToolbar";
+</pre>
-</pre>
+&lt;/pre&gt;

@@ Line 1: / Line 1: @@
 == 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 "[[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/ToolbarSets|FCKConfig.ToolbarSets]]" configuration entry or create this entry in your custom config file..
+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 "[[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/ToolbarSets|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:
-<pre>
+<pre>FCKConfig.ToolbarSets["Default"] = [
-FCKConfig.ToolbarSets["Default"] = [
+['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
-	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
+['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
-	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
+['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
-	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
+['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
-	['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
+'/',
-	'/',
+['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
-	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
+['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
-	['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
+['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
-	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
+['Link','Unlink','Anchor'],
-	['Link','Unlink','Anchor'],
+['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
-	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
+'/',
-	'/',
+['Style','FontFormat','FontName','FontSize'],
-	['Style','FontFormat','FontName','FontSize'],
+['TextColor','BGColor'],
-	['TextColor','BGColor'],
+['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
-	['FitWindow','ShowBlocks','-','About']		// No comma for the last row.
+]&nbsp;;
 FCKConfig.ToolbarSets["Basic"] = [
-	['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
+['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
-] ;
+]&nbsp;;
 </pre>
 === Toolbar Bands ===
@@ Line 35: / Line 33: @@
 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 config file:
+==== ASP ====