CoreMedia's CKEditor 5 Plugins provides plugins for CKEditor 5 with focus on integration into CoreMedia CMS. Since 2022 (CMS v2210.1) CKEditor 5 replaces the previous integration of CKEditor 4.

• Install the required Node.js version according to engines in package.json (also: .nvmrc).

  If you have nvm installed, nvm use and/or nvm install will switch to the required Node.js version.

  NVM for Windows

  nvm use is only available for the original Linux distribution of NVM. Alternatives, such as CoreyButler.NVMforWindows (winget ID) are not aware of it. A possible alternative is nvm use $(Get-Content .nvmrc) or use Windows Subsystem Linux (WSL).

• Install the required pnpm version according to the engines entry in package.json.

$ pnpm install
$ pnpm -r build
$ pnpm start

Note, that pnpm install requires access to npm.coremedia.io.

The last command will start a lightweight HTTP server and by default opens http://127.0.0.1:8080/sample/ (may vary, if port 8080 is in use) in your default browser. It will provide a demo of the features providing by the plugins contained in this workspace. As alternative, open app/sample/index.html directly in your preferred browser.

Most packages are published with scope @coremedia/ as for example @coremedia/ckeditor5-coremedia-link. Others, only meant for internal workspace usage, are not published and have scope @coremedia-internal/.

The subtle difference between ckeditor5-coremedia-richtext and ckeditor5-coremedia-richtext-support is, that the latter one just adds support for attributes from CoreMedia RichText for which no editing actions are configured (yet). Simply speaking, ckeditor5-coremedia-richtext ensures, that data can be read and stored on server, while ckeditor5-coremedia-richtext-support ensures, that all valid CoreMedia RichText attributes are registered as valid within CKEditor. For details see the corresponding documentation.

For minimal CoreMedia RichText 1.0 support, the only module to install is ckeditor5-coremedia-studio-essentials:

pnpm install @coremedia/ckeditor5-coremedia-studio-essentials

import CoreMediaStudioEssentials from
    "@coremedia/ckeditor5-coremedia-studio-essentials/CoreMediaStudioEssentials";

ClassicEditor.create(document.querySelector('#editor'), {
  plugins: [
    CoreMediaStudioEssentials,
    /* ... */
  ],
}).then((editor) => {
  /* ... */
});

These essential plugins ensure, that you can edit any CoreMedia RichText 1.0 and that any information loaded from server are not lost. This approach mainly relies on CKEditor's General HTML Support feature, telling CKEditor not to remove any not (yet) known elements or attributes from data.

For full editorial experience, you should of course install corresponding plugins, like CKEditor's text-formatting plugins or editing support for link targets (mapped to xlink:role/xlink:show in CoreMedia RichText).

Alternative: For versions later than 16.0.0 we ship a so-called data facade plugin. This plugin takes care of a better behavior for data coming from external data storages, preventing "no change" data to be written back to server (without editorial interactions applied).

Still, if not relying on this recommended plugin, the following information may be valuable to you.

It is recommended, using CKEditor's Autosave plugin for saving data into CoreMedia CMS. Note though, that the Autosave plugin is automatically triggered when initialized with data received from CoreMedia CMS:

Create CKEditor → Set Data From Server → Autosave Data To Server

As CKEditor applies/has to apply some normalization to the received data (such as removing ignorable whitespace), the data set and directly afterward received on Autosave via getData() may differ (while being semantically equal).

Unhandled, and directly forwarded to server, this would trigger the so-called auto-checkout feature in CoreMedia Studio: The editor opening the affected document will own the document and will be marked as being the current editor of that document.

Thus, it is strongly recommended validating editor.model.document.version and preventing storing data on server, if these versions do not differ from previously setData() call. A typical approach is:

1. Invoke setData() for data from server.
2. Remember editor.model.document.version directly after set.
3. Wait for invocation of Autosave.
4. If editor.model.document.version is the same as remembered on set prevent forwarding the data to CoreMedia CMS.

For convenience, you may consider using the ckeditor5-data-facade that implements the described behavior.

• GitHub Pages: These pages on GitHub Pages.
• Walk-Through Examples: Some step-by-step guides for customizing CKEditor 5.
• Development: Hints for developing within this workspace
• License: Apache 2.0 License Text
• Versioning: Versioning Policy