CKEditor 3.x/Developers Guide/Toolbar - Revision history

Sebstefanov at 11:13, 5 March 2012

2012-03-05T11:13:45Z

Sebstefanov at 11:11, 5 March 2012

2012-03-05T11:11:46Z

Mkesicki: /* Toolbar Definition */

2011-06-14T07:34:58Z

‎Toolbar Definition

Mkesicki: /* Toolbar Definition */

2011-06-14T07:34:02Z

‎Toolbar Definition

Mkesicki: /* Toolbar Definition */

2011-06-14T07:32:49Z

‎Toolbar Definition

Mkesicki: /* Toolbar Customization */

2011-06-14T07:31:45Z

‎Toolbar Customization

Anna: Redundant spacing removed

2011-05-27T12:29:18Z

Redundant spacing removed

Anna: Note with upgrade call added

2011-05-27T12:28:41Z

Note with upgrade call added

Anna: /* Toolbar Customization */ Final example updated to CKEditor 3.6

2011-05-27T12:22:19Z

‎Toolbar Customization: Final example updated to CKEditor 3.6

Anna: /* Toolbar Customization */ Section updated to CKEditor 3.6

2011-05-27T11:08:27Z

‎Toolbar Customization: Section updated to CKEditor 3.6

@@ Line 19: / Line 19: @@
 	{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
 	{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
+        'HiddenField' ] },
 	'/',
 	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
-	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
+	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
 	{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
 	{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },

@@ Line 23: / Line 23: @@
 	'/',
 	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
-	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-
+	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
 	{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
 	{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },

@@ Line 20: / Line 20: @@
 	{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
-          'HiddenField' ] },
+         'HiddenField' ] },
 	'/',
 	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

@@ Line 20: / Line 20: @@
 	{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
-'HiddenField' ] },
+          'HiddenField' ] },
 	'/',
 	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
-	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
+	{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-
 	{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
 	{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },

@@ Line 18: / Line 18: @@
 	{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
 	{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
-	{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
+	{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
 	'/',
 	{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

@@ Line 97: / Line 97: @@
 	});
 </source>
 <note>Please note that the toolbar definition was changed in '''CKEditor 3.6''', when a concept of toolbar button groups was introduced. This feature is WAI-ARIA compliant and important for accessibility support, so we recommend to upgrade custom definitions created for previous versions and follow the new standard described above.</note>

← Older revision		Revision as of 12:28, 27 May 2011
Line 97:		Line 97:
	});		});
	</source>		</source>
		+
		+
		+	<note>Please note that the toolbar definition was changed in '''CKEditor 3.6''', when a concept of toolbar button groups was introduced. This feature is WAI-ARIA compliant and important for accessibility support, so we recommend to upgrade custom definitions created for previous versions and follow the new standard described above.</note>

@@ Line 53: / Line 53: @@
 For example, the following is a good recommended toolbar definition that can be placed in the <code>config.js</code> file:
-<source language="js">
+<source language="javascript">
 CKEDITOR.editorConfig = function( config )
+{
@@ Line 74: / Line 74: @@
 </source>
 Inside the configuration file you can create as many toolbar definitions as you need. Later, based on some criteria, you can choose the toolbar to use for each CKEditor instance. Each toolbar definition can be used as many times as required (or not used at all, for that matter). For example, with the following code, two editors are created on the page and each one is using a different toolbar:
-<source language="js">
+<source language="javascript">
 CKEDITOR.replace( 'editor1',
-−
+	{
-        toolbar : 'MyToolbar'
+		toolbar : 'MyToolbar'
-    });
+	});
 CKEDITOR.replace( 'editor2',
-−
+	{
-        toolbar : 'Basic'
+		toolbar : 'Basic'
-    });
+	});
 </source>
 It is also possible to set the toolbar definition in-page, at the same time when you create an editor instance. If this is the case, assign the toolbar setting directly to the editor instance, like in the example below:
-<source language="js">
+<source language="javascript">
 CKEDITOR.replace( 'editor1',
-−
+	{
-        toolbar :
+		toolbar :
-−
+		[
-            ['Styles', 'Format'],
+			{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
-            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
+			{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
+			{ name: 'tools', items : [ 'Maximize','-','About' ] }
-    });
 </source>

@@ Line 56: / Line 56: @@
 CKEDITOR.editorConfig = function( config )
+{
-    config.toolbar = 'MyToolbar';
+	config.toolbar = 'MyToolbar';
-    config.toolbar_MyToolbar =
+	config.toolbar_MyToolbar =
-−
+	[
-        ['NewPage','Preview'],
+		{ name: 'document', items : [ 'NewPage','Preview' ] },
-        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
+		{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
-        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
+		{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
-        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
+		{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
-        '/',
+		'/',
-        ['Styles','Format'],
+		{ name: 'styles', items : [ 'Styles','Format' ] },
-        ['Bold','Italic','Strike'],
+		{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
-        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
+		{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
-        ['Link','Unlink','Anchor'],
+		{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
-        ['Maximize','-','About']
+		{ name: 'tools', items : [ 'Maximize','-','About' ] }
-    ];
+	];
 };
 </source>