This sample page demonstrates editor with loaded full toolbar (all registered buttons) and, if current editor's configuration modifies default settings, also editor with modified toolbar.
Since CKEditor 4 there are two ways to configure toolbar buttons.
You can explicitly define which buttons are displayed in which groups and in which order.
This is the more precise setting, but less flexible. If newly added plugin adds its
own button you'll have to add it manually to your config.toolbar setting as well.
To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:
CKEDITOR.replace( 'textarea_id', {
toolbar: [
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], // Defines toolbar group without name.
'/', // Line break - next group will be placed in new line.
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
]
});
You can define which groups of buttons (like e.g. basicstyles, clipboard
and forms) are displayed and in which order. Registered buttons are associated
with toolbar groups by toolbar property in their definition.
This setting's advantage is that you don't have to modify toolbar configuration
when adding/removing plugins which register their own buttons.
To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:
CKEDITOR.replace( 'textarea_id', {
toolbarGroups: [
{ name: 'document', groups: [ 'mode', 'document' ] }, // Displays document group with its two subgroups.
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, // Group's name will be used to create voice label.
'/', // Line break - next group will be placed in new line.
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'links' }
]
// NOTE: Remember to leave 'toolbar' property with the default value (null).
});
Below you can see editor with full toolbar, generated automatically by the editor.
Note: To create editor instance with full toolbar you don't have to set anything.
Just leave toolbar and toolbarGroups with the default, null values.