CKEditor Configuration Properties

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

All CKEditor configuration properties are documented in the online CKEditor configuration reference.

Configuration composition

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

Bloomreach Content's default JSON configuration of the HTML field type.

See Default configuration of Formatted text fields and Default configuration of Rich text fields at the bottom of this page.
The property ckeditor.config.overlayed.json

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.
The property ckeditor.config.appended.json

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:

Default configuration

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

ckeditor.config.overlayed.json

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

ckeditor.config.appended.json

{
  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"
}

To debug the client-side configuration used by different editors, open the JavaScript console of your browser and inspect the CKEDITOR.instances object. It contains a map of all CKEditor instances in the current page. CKEDITOR.instances.<editorId>.config contains the JSON configuration of a particular editor.

Default configuration for Formatted text fields

{
   "entities":false,
   "basicEntities":true,
   "autoUpdateElement":false,
   "contentsCss":[
      "ckeditor/hippocontents.css"
   ],
   "plugins":"basicstyles,button,clipboard,contextmenu,copyformatting,divarea,enterkey,entities,floatingspace,floatpanel,htmlwriter,listblock,magicline,menu,menubutton,panel,panelbutton,removeformat,richcombo,stylescombo,tab,toolbar,undo",
   "title":false,
   "toolbar":[
      {
         "name":"styles",
         "items":[
            "Styles"
         ]
      },
      {
         "name":"basicstyles",
         "items":[
            "Bold",
            "Italic",
            "Underline",
            "-",
            "CopyFormatting",
            "RemoveFormat"
         ]
      },
      {
         "name":"clipboard",
         "items":[
            "Undo",
            "Redo"
         ]
      }
   ],
   "hippo":{
      "hasBottomToolbar":false
   }
}

Default configuration for Rich text fields

{
   "entities":false,
   "basicEntities":true,
   "autoUpdateElement":false,
   "contentsCss":[
      "ckeditor/hippocontents.css"
   ],
   "dialog_buttonsOrder":"ltr",
   "dialog_noConfirmCancel":true,
   "extraAllowedContent":{
      "embed":{
         "attributes":"allowscriptaccess,height,src,type,width"
      },
      "img":{
         "attributes":"border,hspace,vspace"
      },
      "object":{
         "attributes":"align,data,height,id,title,type,width"
      },
      "p":{
         "attributes":"align"
      },
      "param":{
         "attributes":"name,value"
      },
      "table":{
         "attributes":"width"
      },
      "td":{
         "attributes":"valign,width"
      },
      "th":{
         "attributes":"valign,width"
      }
   },
   "keystrokes":[
      [
         "Ctrl",
         "m",
         "maximize"
      ],
      [
         "Alt",
         "b",
         "showblocks"
      ]
   ],
   "linkShowAdvancedTab":false,
   "plugins":"a11yhelp,autolink,basicstyles,button,clipboard,codemirror,contextmenu,copyformatting,dialog,dialogadvtab,dialogui,divarea,elementspath,enterkey,entities,floatingspace,floatpanel,hippopicker,htmlwriter,indent,indentblock,indentlist,justify,link,list,listblock,liststyle,magicline,maximize,menu,menubutton,panel,panelbutton,pastefromword,pastetext,pastetools,popup,removeformat,resize,richcombo,showblocks,showborders,specialchar,stylescombo,tab,table,tableresize,tableselection,tabletools,textselection,toolbar,undo,youtube",
   "removeFormatAttributes":"style,lang,width,height,align,hspace,valign",
   "title":false,
   "toolbarGroups":[
      {
         "name":"styles"
      },
      {
         "name":"basicstyles"
      },
      {
         "name":"cleanup"
      },
      {
         "name":"undo"
      },
      {
         "name":"listindentalign",
         "groups":[
            "list",
            "indent",
            "align"
         ]
      },
      {
         "name":"links"
      },
      {
         "name":"insert"
      },
      {
         "name":"tools"
      },
      {
         "name":"mode"
      }
   ],
   "hippo":{
      "hasBottomToolbar":false
   }
}