CKEditor Plugins

The core of CKEditor can be extended with many plugins. Each plugin has a unique all-lowercase name that is used to reference the plugin in the CKEditor configuration.

Available plugins

The following CKEditor plugins are included with Bloomreach Content:

[1] The 'forms' plugin requires the CKEditor instance to run in an iframe instead of a div, please see the example configuration on how to set this up correctly.

[2] Explicitly enabled by the system

[3] Explicitly disabled by the system

To summarize: all plugins work in both the Content and the Experience manager apps, except for a few plugins that are explicitly disabled in the Experience manager:

• The maximize plugin is replaced by the "full width toggle" in the right side-panel.
• The sourcearea plugin does not work with the inline version of CKEditor, so the Experience manager uses the sourcedialog plugin instead.
• The resize plugin does not work with the inline version of CKEditor, so the Experience manager uses the autogrow plugin instead.

Runtime debugging

The names of all available plugins can also be retrieved at runtime:

1. Login to Bloomreach Content using Chrome or Firefox

2. Edit a document type that contains an HTML field

3. Open the Chrome dev tools or Firebug

4. Execute the following JavaScript one-liner:

   Object.keys(CKEDITOR.plugins.registered).sort()
   

Similarly, it is possible to retrieve the list of plugins used by a specific editor instance:

1. Print the map of all CKEditor instances to find the name of the editor instance to inspect:

   CKEDITOR.instances
   

2. List all plugins in a specific instance, for example 'editor123':

   Object.keys(CKEDITOR.instances.editor123.plugins).sort()
   

Add a CKEditor plugin

To add a CKEditor plugin that is already available in Bloomreach Experience Manager, use the CKEditor configuration property 'extraPlugins'. For example, to add the 'About' plugin:

ckeditor.config.overlayed.json:

{
  extraPlugins: 'about'
}

A plugin may add one or more buttons to toolbar groups that are not shown by default. In that case, also add these toolbar groups. For example, to show the 'About' button in rich text fields, also add the following configuration:

ckeditor.config.appended.json:

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

Remove a CKEditor plugin

To remove a CKEditor plugin that is included by default, use the CKEditor configuration property ' removePlugins'. For example, to remove the 'styles' combo box, add the following configuration:

ckeditor.config.overlayed.json:

{
  removePlugins: 'stylescombo'
}