CKEditor configuration properties

HTML fields in Hippo CMS are edited with CKEditor 4. Each CKEditor instance gets a JSON object that configures that particular editor instance.

The final JSON configuration object of each HTML field is determined by three things:

1. The default JSON configuration of the HTML field type

   This is located in a string constant in the Java source code of the field plugin for that HTML field type:

   • Formatted text: org.hippoecm.frontend.plugins.ckeditor.CKEditorPropertyPlugin#DEFAULT_EDITOR_CONFIG
   • Rich text: org.hippoecm.frontend.plugins.ckeditor.CKEditorNodePlugin#DEFAULT_EDITOR_CONFIG

    

2. The property ckeditor.config.overlayed.json (either the global or field-specific value)

   Primitive properties (like strings and numbers) and arrays in this JSON object replace properties with the same name in the default configuration. Object properties are merged recursively with object properties with the same name in the default configuration.

3. The property ckeditor.config.appended.json (either the global or field-specific value)

   Properties in this JSON object are appended to the result of the overlayed JSON object. Properties can be appended to arrays. Strings can also be appended to strings, in which case the original string and the appended one get separated by a comma. The latter is typically used to append string values to comma-separated strings. Arrays appended to existing arrays will be joined together. Use this to extend an existing array with multiple elements.

For example:

{
  codemirror: {
   autoFormatOnStart: true
  },
  ignoreEmptyParagraph: false,
  keystrokes: [
    [ 77, 'maximize' ]
  ],
  plugins: "foo,bar"
}

{
  codemirror: {
    autoFormatOnStart: false,
  },
  ignoreEmptyParagraph: true
}

{
  keystrokes: [
    [ 88, 'showblocks' ]
  ],
  plugins: "myplugin"
}

The three example configurations above will be combined into:

{
  codemirror: {
    autoFormatOnStart: false,
  },
  ignoreEmptyParagraph: true,
  keystrokes: [
    [ 77, 'maximize' ],
    [ 88, 'showblocks' ]
  ]
  plugins: "foo,bar,myplugin"
}