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:

<table> <tbody> <tr> <th colspan="1" rowspan="2">Plugin</th> <th colspan="1" rowspan="2">Description</th> <th colspan="2" rowspan="1">Used by default in Formatted Text Fields in</th> <th colspan="2" rowspan="1">Used by default in Rich Text Fields in</th> </tr> <tr> <th>Content</th> <th>Channels</th> <th>Content</th> <th>Channels</th> </tr> <tr> <td><a href="">a11yhelp</a></td> <td>Accessibility Help</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">about</a></td> <td>About CKEditor</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">autogrow</a></td> <td>Auto Grow</td> <td>No</td> <td>Yes [2]</td> <td>No</td> <td>Yes [2]</td> </tr> <tr> <td><a href="">autolink</a></td> <td>Auto Link</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">balloonpanel</a></td> <td>Balloon Panel</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">balloontoolbar</a></td> <td>Balloon Toolbar</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">basicstyles</a></td> <td>Basic Styles</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">bidi</a></td> <td>BiDi (Text Direction)</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">blockquote</a></td> <td>Blockquote</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">button</a></td> <td>UI Button</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">clipboard</a></td> <td>Clipboard</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">codemirror</a></td> <td>CodeMirror (Source) Syntax Highlighting</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">codesnippet</a></td> <td>Code Snippet</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">colorbutton</a></td> <td>Color Button</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">colordialog</a></td> <td>Color Dialog</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">copyformatting</a></td> <td>Copy Formatting</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">contextmenu</a></td> <td>Context Menu</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">dialog</a></td> <td>Dialog</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">dialogadvtab</a></td> <td>Advanced Tab for Dialogs</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">dialogui</a></td> <td>Dialog User Interface</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">div</a></td> <td>Div Container Manager</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">divarea</a></td> <td>Div Editing Area</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">elementspath</a></td> <td>Elements Path</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">emoji</a></td> <td>Emoji</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">enterkey</a></td> <td>Enter Key</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">entities</a></td> <td>Escape HTML Entities</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">fakeobjects</a></td> <td>Fake Objects</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">filebrowser</a></td> <td>File Browser</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">find</a></td> <td>Find / Replace</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">floatingspace</a></td> <td>Floating Space</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">floatpanel</a></td> <td>Floating Panel</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">font</a></td> <td>Font Size and Family</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">format</a></td> <td>Format</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">forms</a> [1]</td> <td>Form Elements</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td>hippoautosave</td> <td>Bloomreach Experience Manager auto save</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>hippopicker</td> <td>Bloomreach Experience Manager pickers for images and internal links</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">horizontalrule</a></td> <td>Horizontal Rule</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">htmlwriter</a></td> <td>HTML Output Writer</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">iframe</a></td> <td>IFrame Dialog</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">iframedialog</a></td> <td>Iframe Dialog Field</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">image</a></td> <td>Image</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td rowspan="1"><a href="">image2</a></td> <td rowspan="1">Enhanced Image</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> </tr> <tr> <td><a href="">indent</a></td> <td>Indent / Outdent</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">indentblock</a></td> <td>Indent Block</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">indentlist</a></td> <td>Indent List</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">justify</a></td> <td>Justify</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td rowspan="1"><a href="">language</a></td> <td rowspan="1">Language</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> </tr> <tr> <td><a href="">link</a></td> <td>Link</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">list</a></td> <td>List</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">listblock</a></td> <td>List Block</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">liststyle</a></td> <td>List Style</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">magicline</a></td> <td>Magic Line</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td rowspan="1"><a href="">mathjax</a></td> <td rowspan="1">Mathematical Formulas</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> </tr> <tr> <td><a href="">maximize</a></td> <td>Maximize</td> <td>No</td> <td>No [3]</td> <td>Yes</td> <td>No [3]</td> </tr> <tr> <td><a href="">mentions</a></td> <td>Mentions</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">menu</a></td> <td>Menu</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">menubutton</a></td> <td>Menu Button</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">notification</a></td> <td>Notification</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">pagebreak</a></td> <td>Page Break</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">panel</a></td> <td>Panel</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">panelbutton</a></td> <td>Panel Button</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">pastefromword</a></td> <td>Paste from Word</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">pastetext</a></td> <td>Paste as Plain Text</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td rowspan="1"><a href="">placeholder</a></td> <td rowspan="1">Placeholder</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> </tr> <tr> <td><a href="">popup</a></td> <td>Popup</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">removeformat</a></td> <td>Remove Format</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">resize</a></td> <td>Editor Resize</td> <td>No</td> <td>No [3]</td> <td>Yes</td> <td>No [3]</td> </tr> <tr> <td><a href="">richcombo</a></td> <td>Rich Combo</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">selectall</a></td> <td>Select All</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">sharedspace</a></td> <td>Shared Space</td> <td>No</td> <td>Yes [2]</td> <td>No</td> <td>Yes [2]</td> </tr> <tr> <td><a href="">showblocks</a></td> <td>Show Blocks</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">showborders</a></td> <td>Show Table Borders</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">smiley</a></td> <td>Insert Smiley</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">sourcearea</a></td> <td>Source Editing Area</td> <td>No</td> <td>No [3]</td> <td>No</td> <td>No [3]</td> </tr> <tr> <td><a href="">sourcedialog</a></td> <td>Source Dialog</td> <td>No</td> <td>Yes [2]</td> <td>No</td> <td>Yes [2]</td> </tr> <tr> <td><a href="">specialchar</a></td> <td>Special Characters</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">stylescombo</a></td> <td>Styles Combo</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">tab</a></td> <td>Tab Key Handling</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">table</a></td> <td>Table</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">tableresize</a></td> <td>Table Resize</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">tableselection</a></td> <td>Table Selection</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">tabletools</a></td> <td>Table Tools</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">templates</a></td> <td>Content Templates</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">textselection</a></td> <td>Keep TextSelection</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">toolbar</a></td> <td>Editor Toolbar</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td><a href="">undo</a></td> <td>Undo</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td rowspan="1"><a href="">widget</a></td> <td rowspan="1">Widget</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> <td rowspan="1">No</td> </tr> <tr> <td><a href="">wordcount</a></td> <td>Word Count and Character Count</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">wysiwygarea</a></td> <td>IFrame Editing Area</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <td><a href="">youtube</a></td> <td>YouTube Plugin</td> <td>No</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table>

[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:


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:

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


## 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:


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:


## 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: