Customize CKEditor CSS

The style of the editing area and the 'styles' combo box of CKEditor can be customized. The CSS file that control this styling is specified in the CKEditor configuration property ' contentsCss'. The default style is defined in the file ckeditor/hippocontents.css in the jar file hippo-cms-richtext-ckeditor-plugins. Hence the default configuration is:

{
  contentsCss: 'ckeditor/hippocontents.css'
}

To use custom CKEditor styling in your project, first include a CSS file in your CMS module. For example:

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

Second, reference this custom CSS file in the CKEditor configuration.

ckeditor.config.overlayed.json:

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

If the default style should be replaced completely, then do not include 'ckeditor/hippocontents.css' in the 'contentsCss' configuration property.

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

Scope custom CKEditor CSS rules

Each rule in the custom CKEditor CSS file must be scoped to one of these classes:

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

Examples of properly scoped CKEditor 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 

It is also possible to customize the CSS of a specific HTML field instead of all HTML fields. First add a custom CSS class to such a field using "Add CSS class" in the document type editor (e.g. add a CSS class called "myspecialfield"). Second, scope the CSS rules for that field to that CSS class only (e.g. use ' .myspecialfield .cke_wysiwyg_div.cke_editable' as the scope).

To customize the preview of a saved HTML field, follow the steps mentioned in tweak the CSS of the CMS and apply it to the HTML field of your choice.