CKEditor 5 customization

For Magnolia 6.3 installations, CKEditor 5 is the default rich text field. This page outlines how to build your editor, install it in Magnolia, and customize it for your needs.

A Magnolia instance includes one CKEditor 5 build, which may contain several editor types for pages requiring different editor configurations.

CKEditor 4 migration to CKEditor 5

Magnolia 6.2 uses CKEditor 4 in its rich text field. Magnolia 6.3 is released with CKEditor 5. While most field properties from Magnolia 6.2 are supported, CKEditor 4 and CKEditor 5 are very different in their core architecture. For this reason, Magnolia recommends previewing any content transferred from CKEditor 4 in Magnolia 6.2 and checking that the content is published as you want it.

In particular, you should check their compatibility tables for configuration and plugins to determine which content might be affected. Furthermore, follow their migration guidelines to ensure a smooth transition of any content.

If you use a custom build, Magnolia will ignore all the other configured properties in the rich text field.

Using a custom build

For more complex customizations (different plugins, editor types, and so on), you can replace the CKEditor 5 provided by Magnolia with your custom build by setting the MicroProfile property magnolia.ckeditor5.build to a light-module resource (for example, /custom-lm/webresources/ckeditor5.js) or an absolute URL.

To create a custom editor build for Magnolia, you need to ensure the following:

The editor (or editors) are exported from the module inside the CKEDITOR object.
The editor has a default set of plugins and a default configuration, so there’s no need to pass them to EditorObject.create() at runtime.
JavaScript and CSS are bundled into a single file. Our custom build repository provides an example of how to achieve that with various module builders like Webpack or Vite.

Including the custom build in Magnolia

Once your custom build is configured, use the editorType property to specify which editor from the ones included in the build you want to use.

form:
  properties:
    text:
      $type: richTextField
      editorType: BalloonEditor # JavaScript object CKEDITOR.BallonEditor

Authoring your text

This page assumes you installed a Classic CKEditor. Your CKEditor toolbar should look similar to the one above the CKEditor demo page below.

Apps configuration

A customized CKEditor 5 build also contains two additional Magnolia plugins. They allow you to link to assets and pages in Magnolia.

Plugin Icon Description

Plugin	Icon	Description
Link to Magnolia page		Opens a chooser dialog where you can link to a page in the `website` workspace.
Link to asset		Opens a chooser dialog where you can link to an asset in the `dam` workspace.

Link to Magnolia page

Link to Magnolia page

Opens a chooser dialog where you can link to a page in the website workspace.

Link to asset

Link to DAM document

Opens a chooser dialog where you can link to an asset in the dam workspace.

Previewing the HTML

Preview your content to see how the plugins used by CKEditor 5 render it on the final webpage.