- 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.
-