loading table of contents...

Studio Developer Manual / Version 2310

Table Of Contents

10.3.3 Enable CKEditor 5

Your current state is, that you received CoreMedia Blueprint with default CKEditor 5 enabled, switched to CKEditor 4 as described in Section 10.2.1, “Downgrading to CKEditor 4” and now, you want to enable CKEditor 5 for development or, eventually, for production use.

You may do so, of course, by reverting the commit that enabled CKEditor 4. To do it manually, these are the steps to take:

  1. Add the CKEditor 5 Plugin Package to studio-client.​main.​base-app:

    Execute pnpm add as sketched in Example 10.50, “Add CKEditor 5 Plugin Package”. studioClientRoot refers to the root folder of your studio-client application, blueprintVersion refers to the version of your Blueprint, for example 1.0.0-SNAPSHOT.

    pnpm add \
      --dir "${studioClientRoot}" \
      --no-save-workspace-protocol \
      --filter "@coremedia-blueprint/studio-client.main.base-app" \

    Example 10.50. Add CKEditor 5 Plugin Package

  2. Replace RichTextPropertyField:

    As shown in Example 10.51, “Replace RichTextPropertyField, replace all imports of

    • @coremedia/​studio-client.​main.​ckeditor4-components/​fields/​RichTextPropertyField


    • @coremedia/​studio-client.​main.​editor-components/​sdk/​premular/​fields/​richtext/​RichTextPropertyField

    Skip the files in ckeditor4-plugins.

    // Before: CKEditor 4
    import RichTextPropertyField from
    // After: CKEditor 5
    import RichTextPropertyField from

    Example 10.51. Replace RichTextPropertyField

    To all affected modules add the dependency @coremedia/​studio-client.​main.​editor-components@​${releaseVersion} where releaseVersion is the version of the corresponding Studio Client release.

  3. Replace TeaserOverlayContainer:

    Replace all imports of @coremedia/​studio-client.​main.​ckeditor4-components/​fields/​TeaserOverlayPropertyField by @coremedia/​studio-client.​main.​teaser-overlay-components/​TeaserOverlayContainer as shown in Example 10.52, “Replace TeaserOverlayContainer. Skip files in ckeditor4-plugins and ckeditor4-components.

    Note, that for easier replacement steps, Blueprint names imported TeaserOverlayPropertyField as TeaserOverlayContainer.

    // Before: CKEditor 4
    import TeaserOverlayContainer from
    // After: CKEditor 5
    import TeaserOverlayContainer from

    Example 10.52. Replace TeaserOverlayContainer

    To all affected modules add the dependency @coremedia/​studio-client.​main.​teaser-overlay-components@​${releaseVersion} where releaseVersion is the version of the corresponding Studio Client release.

Additional Upgrade Steps for Custom Components

Replace all usages of RichTextArea and CoreMediaRichTextArea if used in any custom components, by richTextAreaRegistry.getRichTextAreaConfig(...) as shown in Example 10.53, “Replace RichTextArea and CoreMediaRichTextArea.

// Before: CKEditor 4
Config(RichTextArea, {
  itemId: "exampleRichTextEditor",
  height: 100,
  readOnly: true,
  plugins: [ ... ]

// After: CKEditor 5
richTextAreaRegistry.getRichTextAreaConfig("cke5", {
  itemId: "exampleRichTextEditor",
  editorType: CKEditorTypes.HTML_VIEWER_EDITOR_TYPE,
  height: 100,
  plugins: [
    Config(BindReadOnlyPlugin, { ... }),

Example 10.53. Replace RichTextArea and CoreMediaRichTextArea

Please note that CKEditor5RichTextArea components may also receive an optional editorType property. Also, the readOnly property is not supported for CKEditor 5. Please use the BindReadOnlyPlugin to map the component state accordingly.


Eventually, you may want to check and remove any now possibly unused dependencies to:

  • @coremedia/​studio-client.​main.​ckeditor4-components

  • @coremedia-blueprint/​studio-client.​main.​ckeditor4-plugin


Studio-Server: Ensure Multi-Class-Span-Filter Disabled

For CKEditor 4 it is strongly recommended to enable the so-called Multi-Class-Span-Filter on CoreMedia Studio Server. This is disabled by default, as it clashes with CKEditor 5.

If you previously enabled the filter as described in Section “Enable CKEditor 4”, ensure that it is disabled now in of the studio-server-app module:

# Enable if using CKEditor 4 in studio-client.
# Defaults to disabled as recommended for CKEditor 5.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.