CKSource Docs - User contributions [en]

Template:Drupal Troubleshooting

2012-07-26T10:31:30Z

Mkesicki: /* CKEditor does not work in my theme */

The following article describes some known issues that you might encounter when installing and using the CKEditor for Drupal module.

== CKEditor does not work in my theme ==
Your theme may be missing the following code:
<source lang="php">
<?php print $scripts; ?>
</source>
Add that line of code to the head section of your theme.

Another possibility is that the following code might be missing in your theme:
<source lang="php">
<?php print $page_bottom; ?>
</source>
The solution is the same as above — you need to add that line to your theme at the end of its code.

Finally, you can also try to switch to a different theme.

== Images are not displayed after the content is submitted ==
Most probably you need to properly configure the input format. Either set it to '''Full HTML''' or add the <code><img></code> tag to the '''Filtered HTML''' format.

{{#ifeq: {{{version}}} | 6 |If you want to extend the list of allowed HTML tags, go to the '''Administration Panel''' > '''Site configuration''' > '''Input formats''' and click the '''configure''' link next to the chosen input format. Open the '''Configure''' tab and add the <code><img></code> tag to the '''Allowed HTML tags''' field of the '''HTML Filter''' section. |If you want to extend the list of allowed HTML tags, go to the '''Administration Panel''' > '''Configuration''' > '''Content Authoring''' > '''Text formats''' and click the '''configure''' link next to the chosen input format. Open the '''Limit allowed HTML Tags''' tab in the '''Filter settings''' section and add the <code><img></code> tag to the '''Allowed HTML tags''' field.}}

{{#ifeq: {{{version}}} | 6 |== Selected toolbar does not show for User 1 ==
There are two reasons why you are seeing a different toolbar (or do not see CKEditor at all):
* If the '''Allow users to customize CKEditor appearance''' option is enabled, each user may override the profile settings in the '''Rich text editor settings''' section of the <code>admin/user/N/edit</code> page ('''My Account''' > '''Edit''').
* A different profile is used for User 1 than you expect.
*; User 1 must be assigned a system role that corresponds to the privileges required. If no role is assigned to User 1, this user will have the privileges of an "authenticated user" (usually it is the '''Advanced''' profile).| }}

== The CKEditor module is not installed correctly ==
If your CKEditor does not show, you should check whether all files were extracted correctly. The <code>/sites/all/modules/ckeditor/ckeditor/</code> directory should contain the following files: <code>ckeditor.js</code>, <code>config.js</code>, <code>contents.css</code> as well as directories named <code>images</code>, <code>lang</code>, <code>plugins</code>, <code>skins</code>, and <code>themes</code>.

The correct directory structure is as follows:
<source>
modules <dir>
ckeditor <dir>
ckeditor.css
ckeditor.info
...
ckeditor <dir>
_source <dir>
images <dir>
lang <dir>
plugins <dir>
skins <dir>
themes <dir>
ckeditor.js
...
...
</source>

== CKEditor does not work after upgrading ==
This may be caused by the browser cache. Clear your browser cache and restart the browser if clearing the cache did not help.

If you upgraded the CKEditor module, make sure that all roles with "access ckeditor" permissions are assigned to at least one CKEditor profile.

== Text alignment does not work ==
In the <code>ckeditor.config.js</code> file (located in the CKEditor module directory), the following classes are defined to provide the text alignment functionality:
<source lang="javascript">
config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];
</source>

Unfortunately, some themes may override these styles and text alignment may not work as expected.

If you are using the '''Full HTML''' input format, you may simply comment out this line:
<source lang="javascript">
//config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];
</source>

CKEditor will then use inline styles instead:
<source lang="html4strict">
sample text
</source>

The problem is that inline styles may only be used with the '''Full HTML''' format. '''Filtered HTML''' will strip that code, so do not use this solution with this input format.

For '''Filtered HTML''' things are a bit more complicated. For example if your theme defines such CSS style as:
<source lang="css">
.content p { text-align: left; }
</source>
the <code>text-align</code> property set in the <code>.rteright</code> class will not work.

To align the <code></code> tag, you will have to edit the <code>/sites/all/modules/ckeditor/ckeditor.css</code> file and create a style that will be applied to the <code></code> tag:
<source lang="css">
.content p.rteleft {
text-align: left;
}
.content p.rteright {
text-align: right;
}
.content p.rtecenter {
text-align: center;
}
.content p.rtejustify {
text-align: justify;
}
</source>

Use DOM inspector (in Firefox) to check why the alignment does not work and correct your CSS styles. There is no universal workaround for this situation.

== Line breaks removed when editing content previously authored without using CKEditor ==
The problem lies in the way you configured your input filters. Before you enabled CKEditor, you probably had the Line break converter enabled. Now you are trying to edit the same content with the Line break converter disabled, thus the line breaks are removed.

Possible workarounds:
* Enable the Line break converter (not recommended).
* Create a new input format with the Line break converter enabled. Use it just for old articles (recommended).
* Start with CKEditor disabled by default, replace all new line characters manually with a <code> </code> tag, then use toggle to switch to WYSIWYG mode.

== Quote symbols are being changed to quote entities ==
Some modules like Typogrify or SmartyPants require special handling of HTML entities. For example, by default CKEditor will convert a double quote character (<code>"</code>) to <code>&quot;</code>. To disable processing of HTML entities, open the CKEditor profile settings and go to the '''Advanced Options''' section. If you set the '''HTML Entities''' option to '''No''', CKEditor will no longer convert all applicable characters to HTML entities.

CKEditor 3.x/Developers Guide/Toolbar

2011-06-14T07:34:58Z

Mkesicki: /* Toolbar Definition */

{{#CUSTOMTITLE:CKEditor Toolbar}}
While CKEditor is a full-featured WYSIWYG editor, not all of its options may be needed in all cases. Because of this, toolbar customization is one of the most common and required tasks when dealing with CKEditor.

== Toolbar Definition ==
A toolbar definition is a JavaScript array that contains the elements to be displayed in all '''toolbar rows''' available in the editor.

The toolbar configuration can be defined in CKEditor using one of the following methods:
* The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar toolbar]</code> setting.
* The <code>toolbar_''name''</code> setting, where the <code>''name''</code> element is the name used to identify the toolbar in the <code>toolbar</code> setting.

The following code snippet contains the default CKEditor toolbar setting.
<source language="js">
config.toolbar = 'Full';

config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ 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: '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: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
</source>
Note that in the code above (just like in the default CKEditor configuration) two toolbar definitions have been defined. The first one is named '''Full''' and the second one is '''Basic'''. The toolbar was set to use the '''Full''' definition.

=== Toolbar Button Groups ===
Every toolbar definition is composed of a series of '''toolbar button groups'''. Each toolbar group has a label (name) and the listing of buttons that belong to the group, placed in square brackets (<code>[ ]</code>). The toolbar group items move together to new rows when the editor is resized.

The group label will be used by assisstive devices such as screen readers. It is added in the <code>name</code> attribute and is first looked up in the CKEditor language file (under the <code>editor.lang.toolbarGroups.''group_name''</code> entry). When its definition is found, the text value of this entry is used. If the <code>name</code> attribute value does not appear in the language file, it is taken as a literal toolbar group label and read aloud.

As visible in the code above, each toolbar button group is defined as a separate JavaScript array of strings. Every string stands for a single toolbar item to be used. Toolbar items are defined by plugins.

You can also include a separator in the toolbar group by including a dash (<code>"-"</code>) character in it.

=== Forcing Row Break ===
The '''Full''' definition contains numerous slash (<code>"/"</code>) characters that were placed between toolbar button groups. They can be used to force a break at the point where they were placed, rendering the next toolbar group in a new row. This placement will not be changed when CKEditor is resized.

== Toolbar Customization ==
A simple way to configure the toolbars of all CKEditor instances is to add a custom toolbar definition inside the <code>config.js</code> file, or even better — in a separate custom configuration file (see [[CKEditor 3.x/Developers Guide/Setting Configurations|Setting Configuration]]). The easiest way to do that is to copy the default '''Full''' toolbar definition, and strip it down to your needs.

For example, the following is a good recommended toolbar definition that can be placed in the <code>config.js</code> file:
<source language="javascript">
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';

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

CKEDITOR.replace( 'editor2',
{
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="javascript">
CKEDITOR.replace( 'editor1',
{
toolbar :
[
{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
]
});
</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>

CKEditor 3.x/Developers Guide/Toolbar

2011-06-14T07:34:02Z

Mkesicki: /* Toolbar Definition */

CKEditor 3.x/Developers Guide/Toolbar

2011-06-14T07:32:49Z

Mkesicki: /* Toolbar Definition */

{{#CUSTOMTITLE:CKEditor Toolbar}}
While CKEditor is a full-featured WYSIWYG editor, not all of its options may be needed in all cases. Because of this, toolbar customization is one of the most common and required tasks when dealing with CKEditor.

== Toolbar Definition ==
A toolbar definition is a JavaScript array that contains the elements to be displayed in all '''toolbar rows''' available in the editor.

The toolbar configuration can be defined in CKEditor using one of the following methods:
* The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar toolbar]</code> setting.
* The <code>toolbar_''name''</code> setting, where the <code>''name''</code> element is the name used to identify the toolbar in the <code>toolbar</code> setting.

The following code snippet contains the default CKEditor toolbar setting.
<source language="js">
config.toolbar = 'Full';

config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ 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: '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: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
</source>
Note that in the code above (just like in the default CKEditor configuration) two toolbar definitions have been defined. The first one is named '''Full''' and the second one is '''Basic'''. The toolbar was set to use the '''Full''' definition.

=== Toolbar Button Groups ===
Every toolbar definition is composed of a series of '''toolbar button groups'''. Each toolbar group has a label (name) and the listing of buttons that belong to the group, placed in square brackets (<code>[ ]</code>). The toolbar group items move together to new rows when the editor is resized.

The group label will be used by assisstive devices such as screen readers. It is added in the <code>name</code> attribute and is first looked up in the CKEditor language file (under the <code>editor.lang.toolbarGroups.''group_name''</code> entry). When its definition is found, the text value of this entry is used. If the <code>name</code> attribute value does not appear in the language file, it is taken as a literal toolbar group label and read aloud.

As visible in the code above, each toolbar button group is defined as a separate JavaScript array of strings. Every string stands for a single toolbar item to be used. Toolbar items are defined by plugins.

You can also include a separator in the toolbar group by including a dash (<code>"-"</code>) character in it.

=== Forcing Row Break ===
The '''Full''' definition contains numerous slash (<code>"/"</code>) characters that were placed between toolbar button groups. They can be used to force a break at the point where they were placed, rendering the next toolbar group in a new row. This placement will not be changed when CKEditor is resized.

== Toolbar Customization ==
A simple way to configure the toolbars of all CKEditor instances is to add a custom toolbar definition inside the <code>config.js</code> file, or even better — in a separate custom configuration file (see [[CKEditor 3.x/Developers Guide/Setting Configurations|Setting Configuration]]). The easiest way to do that is to copy the default '''Full''' toolbar definition, and strip it down to your needs.

For example, the following is a good recommended toolbar definition that can be placed in the <code>config.js</code> file:
<source language="javascript">
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';

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

CKEDITOR.replace( 'editor2',
{
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="javascript">
CKEDITOR.replace( 'editor1',
{
toolbar :
[
{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
]
});
</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>

CKEditor 3.x/Developers Guide/Toolbar

2011-06-14T07:31:45Z

Mkesicki: /* Toolbar Customization */

{{#CUSTOMTITLE:CKEditor Toolbar}}
While CKEditor is a full-featured WYSIWYG editor, not all of its options may be needed in all cases. Because of this, toolbar customization is one of the most common and required tasks when dealing with CKEditor.

== Toolbar Definition ==
A toolbar definition is a JavaScript array that contains the elements to be displayed in all '''toolbar rows''' available in the editor.

The toolbar configuration can be defined in CKEditor using one of the following methods:
* The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar toolbar]</code> setting.
* The <code>toolbar_''name''</code> setting, where the <code>''name''</code> element is the name used to identify the toolbar in the <code>toolbar</code> setting.

The following code snippet contains the default CKEditor toolbar setting.
<source language="js">
config.toolbar = 'Full';

config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ 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: '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: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
</source>
Note that in the code above (just like in the default CKEditor configuration) two toolbar definitions have been defined. The first one is named '''Full''' and the second one is '''Basic'''. The toolbar was set to use the '''Full''' definition.

=== Toolbar Button Groups ===
Every toolbar definition is composed of a series of '''toolbar button groups'''. Each toolbar group has a label (name) and the listing of buttons that belong to the group, placed in square brackets (<code>[ ]</code>). The toolbar group items move together to new rows when the editor is resized.

The group label will be used by assisstive devices such as screen readers. It is added in the <code>name</code> attribute and is first looked up in the CKEditor language file (under the <code>editor.lang.toolbarGroups.''group_name''</code> entry). When its definition is found, the text value of this entry is used. If the <code>name</code> attribute value does not appear in the language file, it is taken as a literal toolbar group label and read aloud.

As visible in the code above, each toolbar button group is defined as a separate JavaScript array of strings. Every string stands for a single toolbar item to be used. Toolbar items are defined by plugins.

You can also include a separator in the toolbar group by including a dash (<code>"-"</code>) character in it.

=== Forcing Row Break ===
The '''Full''' definition contains numerous slash (<code>"/"</code>) characters that were placed between toolbar button groups. They can be used to force a break at the point where they were placed, rendering the next toolbar group in a new row. This placement will not be changed when CKEditor is resized.

== Toolbar Customization ==
A simple way to configure the toolbars of all CKEditor instances is to add a custom toolbar definition inside the <code>config.js</code> file, or even better — in a separate custom configuration file (see [[CKEditor 3.x/Developers Guide/Setting Configurations|Setting Configuration]]). The easiest way to do that is to copy the default '''Full''' toolbar definition, and strip it down to your needs.

For example, the following is a good recommended toolbar definition that can be placed in the <code>config.js</code> file:
<source language="javascript">
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';

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

CKEDITOR.replace( 'editor2',
{
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="javascript">
CKEDITOR.replace( 'editor1',
{
toolbar :
[
{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
]
});
</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>

CKEditor 3.x/Developers Guide/Toolbar

2010-09-03T06:11:15Z

Mkesicki:

While the editor is full featured, not all options may be needed in all cases. Because of this, customizing the toolbar is one of the most common and required tasks when dealing with CKEditor.

== Toolbar definition ==

A toolbar definition is a JavaScript array that contains the elements to be displayed in all "toolbar rows" available in the editor. There are two ways to set the desired toolbar definition in the editor. It can be set directly into the "toolbar" setting, or it can instead be set to a configuration named "toolbar_<name>", where "<name>" is a name that can be used to identify the toolbar in the "[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar toolbar]" setting. The following is the default setting we have in the editor.
<pre>config.toolbar = 'Full';

config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr', 'BidiRtl'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];

config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
</pre>
Note that two toolbar definitions have been defined, one named "Full" and the other "Basic". The "Full" definition has been set to be used in the toolbar setting.

=== Toolbar Bands ===

Every toolbar definition 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 definitions, every toolbar band is defined as a separated JavaScript array of strings. Every string indicates toolbar item to be used. Toolbar items are defined by plugins.

You can also include a separator in the toolbar band by including the dash ("-") character on it.

=== Forcing Row Break ===

Looking at the "Full" definition you will note some slash ("/") characters between toolbar bands. This slash can be used to force a break at that point, having the next band to be rendered in a new row and not following the previous one.

== Customizing the toolbar ==

A simple way to configure all editors toolbar is by simply adding a custom toolbar definition inside the config.js file, or even better in a separated configuration file (see "[[CKEditor_3.x/Developers_Guide/Setting_Configurations|Setting Configurations]]"). The easiest way for that is by simply copying the above "Full" toolbar definition, and strip it down to your needs. For example, the following is a good recommended toolbar definition to have in the config.js file:
<pre>CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';

config.toolbar_MyToolbar =
[
['NewPage','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format'],
['Bold','Italic','Strike'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor'],
['Maximize','-','About']
];
};
</pre>
You can create as many toolbar definitions as you want inside the configuration file. Later, based on some criteria, you can decide the toolbar to use for each editor instance. For example, with the following code, two editors are created in the page, each one using a different toolbar:
<pre>CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar'
});

CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
});
</pre>
It's also possible to set the toolbar definition in-page, when creating the editor instance directly. In that case, just assign it to the toolbar setting directly, for example:
<pre>CKEDITOR.replace( 'editor1',
{
toolbar :
[
['Styles', 'Format'],
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
]
});
</pre>

CKEditor 3.x/Developers Guide/Toolbar

2010-08-19T12:24:08Z

Mkesicki:

While the editor is full featured, not all options may be needed in all cases. Because of this, customizing the toolbar is one of the most common and required tasks when dealing with CKEditor.

== Toolbar definition ==

A toolbar definition is a JavaScript array that contains the elements to be displayed in all "toolbar rows" available in the editor. There are two ways to set the desired toolbar definition in the editor. It can be set directly into the "toolbar" setting, or it can instead be set to a configuration named "toolbar_<name>", where "<name>" is a name that can be used to identify the toolbar in the "[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar toolbar]" setting. The following is the default setting we have in the editor.
<pre>config.toolbar = 'Full';

config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr' 'BidiRtl'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];

config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
</pre>
Note that two toolbar definitions have been defined, one named "Full" and the other "Basic". The "Full" definition has been set to be used in the toolbar setting.

=== Toolbar Bands ===

Every toolbar definition 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 definitions, every toolbar band is defined as a separated JavaScript array of strings. Every string indicates toolbar item to be used. Toolbar items are defined by plugins.

You can also include a separator in the toolbar band by including the dash ("-") character on it.

=== Forcing Row Break ===

Looking at the "Full" definition you will note some slash ("/") characters between toolbar bands. This slash can be used to force a break at that point, having the next band to be rendered in a new row and not following the previous one.

== Customizing the toolbar ==

A simple way to configure all editors toolbar is by simply adding a custom toolbar definition inside the config.js file, or even better in a separated configuration file (see "[[CKEditor_3.x/Developers_Guide/Setting_Configurations|Setting Configurations]]"). The easiest way for that is by simply copying the above "Full" toolbar definition, and strip it down to your needs. For example, the following is a good recommended toolbar definition to have in the config.js file:
<pre>CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';

config.toolbar_MyToolbar =
[
['NewPage','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format'],
['Bold','Italic','Strike'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor'],
['Maximize','-','About']
];
};
</pre>
You can create as many toolbar definitions as you want inside the configuration file. Later, based on some criteria, you can decide the toolbar to use for each editor instance. For example, with the following code, two editors are created in the page, each one using a different toolbar:
<pre>CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar'
});

CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
});
</pre>
It's also possible to set the toolbar definition in-page, when creating the editor instance directly. In that case, just assign it to the toolbar setting directly, for example:
<pre>CKEDITOR.replace( 'editor1',
{
toolbar :
[
['Styles', 'Format'],
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
]
});
</pre>