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:

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

[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'
}