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.
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.
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 |
---|---|---|
Link to Magnolia page |
Opens a chooser dialog where you can link to a page in the |
|
Link to asset |
Opens a chooser dialog where you can link to an asset in the |
Previewing the HTML
Preview your content to see how the plugins used by CKEditor 5 render it on the final webpage.