Studio Developer Manual / 10.3.3 Enable CKEditor 5

Studio Developer Manual / Version 2210

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:

Add the CKEditor 5 Plugin Package to studio-client.main.base-app:
Execute pnpm add as sketched in Example 10.44, “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" \
  "@coremedia-blueprint/studio-client.main.ckeditor5-plugin@${blueprintVersion}"
```
Example 10.44. Add CKEditor 5 Plugin Package
Replace RichTextPropertyField:
As shown in Example 10.45, “Replace RichTextPropertyField”, replace all imports of
- @coremedia/studio-client.main.ckeditor4-components/fields/RichTextPropertyField
by
- @coremedia/studio-client.main.editor-components/sdk/premular/fields/richtext/RichTextPropertyField
Skip the files in ckeditor4-plugins.
```
// Before: CKEditor 4
import RichTextPropertyField from
  "@coremedia/studio-client.main.ckeditor4-components/fields/RichTextPropertyField";

// After: CKEditor 5
import RichTextPropertyField from
  "@coremedia/studio-client.main.editor-components/sdk/premular/fields/richtext/RichTextPropertyField";
```
Example 10.45. Replace RichTextPropertyField
To all affected modules add dependency @coremedia/studio-client.main.editor-components@${releaseVersion} where releaseVersion is the version of the corresponding Studio Client release.
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.46, “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
  "@coremedia/studio-client.main.ckeditor4-components/fields/TeaserOverlayPropertyField";

// After: CKEditor 5
import TeaserOverlayContainer from
  "@coremedia/studio-client.main.teaser-overlay-components/TeaserOverlayContainer";
```
Example 10.46. 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.47, “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.47. 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.

Cleanup

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 application.properties of the studio-server-app module:

# Enable if using CKEditor 4 in studio-client.
# Defaults to disabled as recommended for CKEditor 5.
#studio.xml-filters.enable-multi-class-span-filter=true

Search Results

Table Of Contents