Studio Developer Manual / 10.2.1 Downgrading to CKEditor 4

Studio Developer Manual / Version 2304

10.2.1 Downgrading to CKEditor 4

Motivation for Downgrading

As mentioned in Section 10.2, “CKEditor 4 Rich Text Editing”, support for CKEditor 4 integration into CoreMedia Studio is deprecated since CoreMedia Content Cloud 2210.

While for most plugins provided for CKEditor 4 alternatives exist for CKEditor 5, you may miss some of them. You may have developed own custom plugins for CKEditor 4 or adaptations to integration into Studio such as extending the toolbar of the CKEditor 4 integration based on Ext JS, and it may be a considerable amount of effort migrating them.

Due to those or even more reasons, you may want to downgrade to CKEditor 4 to untangle Studio development from CKEditor 5 upgrade steps.

Upgrading to CKEditor 5

For details on upgrading to CKEditor 5 see Section 10.3, “Upgrading from CKEditor 4 to CKEditor 5”.

Enable CKEditor 4

As CKEditor 4 still ships with CoreMedia Blueprint but is disabled by default, the only step required to get back to CKEditor 4 is to enable it at the corresponding locations. These steps are just the reverse of those described in Section 10.3.3, “Enable CKEditor 5”.

Additional Steps for Versions Prior to 2110.1

As described in Section 10.3.1, “Additional Upgrade Steps for Versions Prior to 2110.1” you may need to apply changes to your existing CKEditor 4 integration to make it work in CoreMedia Studio. Having this, your downgrade path is twofold: Downgrade the workspace to CKEditor 4 as described here and adapt your existing CKEditor 4 related adaptations according to the extra upgrade steps mentioned in that section.

Remove CKEditor 5 Plugin Package from studio-client.main.base-app:
Execute pnpm remove as sketched in Example 10.33, “Remove CKEditor 5 Plugin Package”. studioClientRoot refers to the root folder of your studio-client application.
```
pnpm remove \
  --dir "${studioClientRoot}" \
  --no-save-workspace-protocol \
  --filter "@coremedia-blueprint/studio-client.main.base-app" \
  "@coremedia-blueprint/studio-client.main.ckeditor5-plugin"
```
Example 10.33. Remove CKEditor 5 Plugin Package
Replace RichTextPropertyField:
Replace all imports of @coremedia/studio-client.main.editor-components/sdk/premular/fields/richtext/RichTextPropertyField by @coremedia/studio-client.main.ckeditor4-components/fields/RichTextPropertyField as shown in Example 10.34, “Replace RichTextPropertyField”. Skip files in ckeditor5-plugins.
```
// Before: CKEditor 5
import RichTextPropertyField from
  "@coremedia/studio-client.main.editor-components/sdk/premular/fields/richtext/RichTextPropertyField";

// After: CKEditor 4
import RichTextPropertyField from
  "@coremedia/studio-client.main.ckeditor4-components/fields/RichTextPropertyField";
```
Example 10.34. Replace RichTextPropertyField
To all affected modules add the dependency @coremedia/studio-client.main.ckeditor4-components@${releaseVersion} where releaseVersion is the version of the corresponding Studio Client release.
Replace TeaserOverlayContainer:
Replace all imports of @coremedia/studio-client.main.teaser-overlay-components/TeaserOverlayContainer by @coremedia/studio-client.main.ckeditor4-components/fields/TeaserOverlayPropertyField as shown in Example 10.35, “Replace TeaserOverlayContainer”. Skip files in ckeditor4-plugins and ckeditor4-components.
Note, that for easier replacement steps from CKEditor 5 to CKEditor 4 back and forth, Blueprint names imported TeaserOverlayPropertyField as TeaserOverlayContainer.
```
// Before: CKEditor 5
import TeaserOverlayContainer from
  "@coremedia/studio-client.main.teaser-overlay-components/TeaserOverlayContainer";

// After: CKEditor 4
import TeaserOverlayContainer from
  "@coremedia/studio-client.main.ckeditor4-components/fields/TeaserOverlayPropertyField";
```
Example 10.35. Replace TeaserOverlayContainer
To all affected modules add the dependency @coremedia/studio-client.main.ckeditor4-components@${releaseVersion} where releaseVersion is the version of the corresponding Studio Client release.

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

@coremedia/studio-client.main.editor-components
@coremedia/studio-client.main.teaser-overlay-components

You may safely skip this cleanup, if you want to switch back to CKEditor 5 soon.

Studio-Server: Enable Multi-Class-Span-Filter

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.

To enable the filter, adapt the application.properties if studio-server-app to contain:

# 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