Warning

Please note: The way to register different types of editors as described in this section is highly experimental and will probably change in future releases. Customers should not rely on any CKEditor Studio API for now. (Such as ckeditorFactory or CKEditor5Wrapper)

The CKEditor ecosystem has changed a lot between CKEditor 4 and CKEditor 5. CoreMedia adjusted their implementation as well and that is why customizations and plugins are now handled a little differently as well.

CKEditor plugins are now imported directly to the build configuration as npm packages. CoreMedia provides all its plugins as npm packages, and you will also have to convert your custom plugins to packages.

These packages can then be installed and imported in the @coremedia-blueprint/studio-client.main.ckeditor5 package in the Blueprint. See the CKEditor 5 Quickstart Guide and Section 9.6.6, “Activating and Customizing CKEditor 5 Preview” in Studio Developer Manual to learn more about how to create your own CKEditor 5 configuration.

These configurations must be registered as a certain editor type in one of the Studio plugins:

 init(): void {
  ckEditorFactory.registerConstructor("default", (editorType)=>{
    return new CKEditor5Wrapper((domElement:Element) => initEditor(domElement));
  }, 5);
}
          

Now you can use this editor type in RichTextPropertyFields or RichTextAreas:

 Config(RichTextPropertyField, {
    itemId: "myRichTextPropertyField",
    propertyName: ConfigUtils.asString(PROPERTY_NAME),
    editorType: "default"
  }),
 
          

Note that you could omit the editorType here because it defaults to "default" anyway. Have a look at Section 9.6.6, “Activating and Customizing CKEditor 5 Preview” in Studio Developer Manual to learn more about registration of editor types.

Have a look at the following links to learn more about how to create your own plugins for CKEditor 5: