CKEditor Configuration Examples

This page provides configuration examples for common CKEditor customizations in Bloomreach Content.

Remove the 'Source' Button

To prevent users from editing HTML source, remove the CKEditor plugins that enable source mode editing.

Update your ckeditor.config.overlayed.json as follows:

{
  removePlugins: 'sourcearea,sourcedialog,codemirror'
}
copy

Render the Editing Area in an iframe Instead of a div

By default, Bloomreach Content uses the CKEditor 'divarea' plugin to render the editing area in a div. This approach improves performance when many editors are open, as it reduces DOM complexity. However, some CKEditor features require the editing area to render in an iframe.

To use an iframe for the editing area, configure CKEditor as shown below:

ckeditor.config.overlayed.json:

{
  removePlugins: 'divarea',
  extraPlugins: 'wysiwygarea'
}
copy

This configuration changes the default styling of HTML fields. The default CSS rules target .cke_wysiwyg_div.cke_editable, which only applies to the div-based editor. To maintain styling, include a copy of the default styles without this class scope.

Enable the 'forms' Plugin

The forms plugin requires CKEditor to run inside an iframe. The CMS document editor is already a form, and HTML does not support nested form elements.

First, configure CKEditor to use an iframe. Then, enable the 'forms' plugin and add its toolbar group:

ckeditor.config.appended.json:

{
  plugins: 'forms',
  toolbarGroups: [
    { name: 'forms' }
  ]
}
copy

Info: The 'forms' plugin ensures that form-related elements are excluded from client-side HTML cleaning. However, server-side HTML cleaning does not automatically allow these elements. For details, see HTML cleaning.

Enable Full Page HTML Editing

To allow editing of full HTML pages (including html, head, and body tags), configure CKEditor to use an iframe and enable full page editing:

ckeditor.config.overlayed.json:

{
  fullPage: true,
  removePlugins: 'divarea', 
  extraPlugins: 'wysiwygarea'
}
copy

If you need to allow additional tags in the HTML head (such as title or link), update the HTML cleaner configuration for both client-side and server-side processing. Consider adding the Document Properties CKEditor Plugin to your project. This plugin is not included by default but can be added as a custom CKEditor plugin.

Disable the CKEditor Context Menu

To use the browser's native context menu instead of CKEditor's context menu, configure CKEditor to use an iframe and remove the plugins responsible for the custom context menu:

ckeditor.config.overlayed.json:

{
  removePlugins: 'divarea,liststyle,tabletools,tableresize,contextmenu',
  extraPlugins: 'wysiwygarea'
}
copy

Enable the Language Plugin

The CKEditor Language plugin is included with Bloomreach Content but is not enabled by default. Its toolbar buttons are part of the 'bidi' toolbar group, which is also disabled by default. To enable the Language plugin, add both the plugin and the 'bidi' toolbar group:

ckeditor.config.appended.json:

{
  extraPlugins: 'language', 
  toolbarGroups: [
    { name: 'bidi' } 
  ] 
}
copy

Disable Automatic Paragraphs

By default, CKEditor wraps text in paragraph tags (<p></p>) when the user presses Enter. To change this behavior so that pressing Enter inserts a line break (<br/>), use the following configuration:

ckeditor.config.overlayed.json:

{
  enterMode: 2,
  autoParagraph: false
}
copy

Allow q and cite Tags

CKEditor only allows HTML tags and attributes associated with enabled plugins. To allow additional tags, use the extraAllowedContent configuration property. Since brXM 12, specify extraAllowedContent as a JSON object.

The following example allows the q tag and the cite tag with the class myclass:

ckeditor.config.appended.json:

{
  extraAllowedContent: {q: {}, cite: {classes: 'myclass'}}
}
copy

Also add q and cite (including the class attribute) to the server-side filteringHtmlCleanerService allowlist.

Enable the Wordcount Plugin to Limit Text

CKEditor does not limit the amount of text by default. To enforce maximum word or character counts, enable and configure the 'wordcount' plugin.

Example configuration:

{  
  extraPlugins: 'wordcount',
  wordcount: {
    showCharCount: true,
    maxCharCount: 400
  }
}
copy

For more details, see the wordcount plugin documentation.