Customize CKEditor CSS

You can customize both the editing area's appearance and the 'styles' combo box in CKEditor by configuring the CSS file used. CKEditor uses the contentsCss configuration property to determine which CSS file controls the editor's styling. By default, CKEditor loads styles from ckeditor/hippocontents.css, which is included in the hippo-cms-richtext-ckeditor-plugins JAR.

The default configuration is:

{
  contentsCss: 'ckeditor/hippocontents.css'
}

To apply custom CKEditor styles in your project:

Add your custom CSS file to your CMS module. For example:

cms/src/main/resources/ckeditor/myckeditorstyle.css

Reference the custom CSS file in your CKEditor configuration.

In your ckeditor.config.overlayed.json:

{
  contentsCss: [
    'ckeditor/hippocontents.css',
    'ckeditor/myckeditorstyle.css'
  ]
}

To completely replace the default styles, omit 'ckeditor/hippocontents.css' from the contentsCss array.

Info: Starting with brXM 10.2, you can add custom styles without including hippocontents.css.
Example ckeditor.config.appended.json:
{
  contentsCss: [
    'ckeditor/myckeditorstyle.css'
  ]
}

Scope Custom CKEditor CSS Rules

You must scope each rule in your custom CKEditor CSS file to one of the following classes:

.cke_wysiwyg_div.cke_editable for the editing area
.cke_panel_container for the 'styles' combo box

Warning: If you do not scope your custom CKEditor CSS, it may affect the layout of the entire Bloomreach Content interface.

Examples of properly scoped CSS rules:

/* Make all links in the editing area green */
.cke_wysiwyg_div.cke_editable a {
  color: green;
}

/* Make the h1 entry in the styles select box blue */
.cke_panel_container .cke_panel_listItem h1 {
  color: blue;
}

Customize the Style of Specific HTML Fields

To customize the CSS for a specific HTML field:

Assign a custom CSS class to the field using "Add CSS class" in the document type editor (for example, myspecialfield).
Scope your CSS rules to that class. For example, use .myspecialfield .cke_wysiwyg_div.cke_editable to target only that field.

To customize the preview of a saved HTML field, follow the instructions in tweak the CSS of the CMS and apply your changes to the relevant HTML field.