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.