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