CKEditor toolbar configuration

The toolbar of a CKEditor instance consists of groups that contain toolbar items (buttons, combo boxes, etc.). The layout of the toolbar can be controlled in two ways:

1. List of toolbar items in CKEditor configuration property ' toolbar'

   This configuration method is used for the ' formatted text' editor:

   {
     toolbar: [
       { name: 'styles', items: [ 'Styles' ] },
       { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', '-', 'RemoveFormat' ] },
       { name: 'clipboard', items: [ 'Undo', 'Redo' ] }
     ]
   }

2. The toolbar configuration consists of an array of named groups (three in the example above), each with an array of toolbar item names to include in that group.

   New toolbar groups with additional items can be added by using the configuration property ' ckeditor.config.appended.json' to append a group with a name and a list of items to the property 'toolbar'.

   For example:

   ckeditor.config.appended.json:

   {
     toolbar: [
       { name: 'mytoolbar', items: [ 'About'] }
     ]
   }
   

   Buttons of extra plugins won't be added automatically to the toolbar. They have to be mentioned explicitly in the toolbar configuration.

3. List of toolbar groups in CKEditor configuration property ' toolbarGroups'

   This configuration method is used for the ' rich text' editor:

   {
     toolbarGroups: [
       { name: 'styles' },
       { name: 'basicstyles' },
       { name: 'undo' },
       { name: 'listindentalign',  groups: [ 'list', 'indent', 'align' ] },
       { name: 'links' },
       { name: 'insert' },
       { name: 'tools' },
       { name: 'mode' }
     ]
   }

   The 'toolbarGroups' configuration consist of an array of toolbar group names (eight in the example above). A group can also be the concatenation of multiple existing toolbar groups (like the 'listindentalign' group in the example).

   Toolbar items of extra plugins will be added automatically to the toolbar, as long as they belong to an existing toolbar group. Extra toolbar groups can be added by using the configuration property ' ckeditor.config.appended.json' to append an extra toolbar group. For example:

   ckeditor.config.appended.json:

   {
     toolbarGroups: [
       { name: 'about' }
     ]
   }

Individual toolbar items can be removed from the toolbar via the CKEditor configuration option ' removeButtons'. This is especially useful with the toolbarGroups configuration method, since it allows you to add a whole toolbar group except for a few toolbar items.