CKEditor Toolbar Configuration

You can control the CKEditor toolbar layout by defining groups that contain toolbar items, such as buttons and combo boxes. There are two primary methods to configure the toolbar in Bloomreach Content.

1. Configuring Toolbar Items with the `toolbar` Property

Use the toolbar property in the CKEditor configuration to define the toolbar for the formatted text editor.

Example configuration:

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

In this configuration, the toolbar is an array of named groups. Each group contains an array of toolbar item names to include.

To add new toolbar groups or additional items, use the ckeditor.config.appended.json property. This property appends a group with a name and a list of items to the toolbar configuration.

Example:

ckeditor.config.appended.json:

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

Toolbar buttons from extra plugins are not added automatically. You must explicitly include them in the toolbar configuration.

2. Configuring Toolbar Groups with the `toolbarGroups` Property

Use the toolbarGroups property in the CKEditor configuration to define the toolbar for the rich text editor.

Example configuration:

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

The toolbarGroups property is an array of toolbar group names. You can define groups that combine multiple existing toolbar groups, as shown with the listindentalign group in the example.

Toolbar items from extra plugins are added automatically if they belong to an existing toolbar group. To add extra toolbar groups, use the ckeditor.config.appended.json property.

Example:

ckeditor.config.appended.json:

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

Note: For more details on both toolbar configuration methods, see the CKEditor documentation.

You can remove individual toolbar items using the CKEditor removeButtons configuration option. This is especially useful with the toolbarGroups method, as it allows you to include an entire group but exclude specific items.

For more information, refer to the CKEditor documentation on removeButtons.

Tip: See the toolbar configuration examples page for common toolbar setups.