At least for CoreMedia Rich Text 1.0 editing support within CKEditor 5 and compatibility to previous releases of CoreMedia Content Cloud, some configuration options are considered mandatory for any flavor of CKEditor 5 configured in CoreMedia Blueprint. This section will tell you about those mandatory aspects.

In general, it is recommended using ckeditorDefault.ts as best-practice approach, which will also apply the following recommendations. For details see Section 10.3.1, “Best Practice: ckeditorDefault.ts”.

Autosave Plugin

One of the mandatory CKEditor 5 plugins to add to any configuration is the Autosave plugin. The required configuration for the plugin is provided from parameter of type CKEditorPluginConfig (package @coremedia/​studio-client.​ckeditor-common). It ensures, that entered data are eventually written back to the server.

Essential Plugins

Just as CKEditor 5 recommends integrating their Essentials plugin, CoreMedia recommends applying the CoreMedia Essentials plugin as described in Section 10.2.11, “Studio Essentials Plugin”. It ensures that any valid CoreMedia Rich Text 1.0 can be loaded and edited within CKEditor 5 without losing any previously set formatting options.

Link Configuration

The protocol used for external links in CoreMedia Studio, can be set directly in the editor configuration in the CoreMedia Blueprint. The default protocol is set to 'https://' as shown in Example 10.8, “Link Configuration in ckeditorDefault.ts”.

link: {
  defaultProtocol: 'https://'
},

For details have a look at the corresponding feature documentation of CKEditor 5: Link.

Alignment Configuration

Text alignment in CoreMedia Rich Text 1.0 is applied as class attribute values, which are:

For best compatibility with previous versions of CoreMedia Content Cloud it is recommended to configure the same alignment options for the Text alignment feature that ships with CKEditor 5. To do so, apply the configuration to the editor instance as shown in Example 10.9, “Text Alignment Configuration”.

alignment: {
  options: [
    {
      name: "left",
      className: "align--left",
    },
    {
      name: "right",
      className: "align--right",
    },
    {
      name: "center",
      className: "align--center",
    },
    {
      name: "justify",
      className: "align--justify",
    },
  ],
},

Image Styles Configuration

Ever since, image (or media object) alignment in CoreMedia Rich Text 1.0 is applied as class attribute value to <img> elements, which are:

A fourth available option, which is an unset floating class, often was referred to as “Page default” to emphasize, that alignment behavior is inherited from parent element hierarchy.

For best compatibility with previous versions of CoreMedia Content Cloud it is recommended to configure the same alignment options for the Image styles feature that ships with CKEditor 5. To do so, apply the configuration to the editor instance as shown in Example 10.10, “Image Alignment Configuration”.

image: {
  styles: {
    options: [
      {
        name: 'float-left',
        icon: alignLeftIcon,
        title: localize('Left-aligned', language),
        className: 'float--left',
        modelElements: [ 'imageInline' ]
      },
      {
        name: 'float-right',
        icon: alignRightIcon,
        title: localize('Right-aligned', language),
        className: 'float--right',
        modelElements: [ 'imageInline' ]
      },
      {
        name: 'float-none',
        icon: withinTextIcon,
        title: localize('Within Text', language),
        className: 'float--none',
        modelElements: [ 'imageInline' ]
      },
      {
        name: 'inline',
        title: localize('Page default', language),
        icon: pageDefaultIcon,
      }
    ]
  },
  toolbar: [
    'imageStyle:float-left',
    'imageStyle:float-right',
    'imageStyle:float-none',
    'imageStyle:inline',
    // ... any more toolbar entries, you would like to add
  ]
},

For details regarding localizing the corresponding labels, have a look at Section 10.3.2, “Localizing CKEditor 5”.