close

Filter

loading table of contents...

Studio Developer Manual / Version 2204

Table Of Contents

9.6.6.4 Adding multiple CKEditor 5 Configurations

In the previous section we have shown how to register a custom editor in CoreMedia Studio, but registering only one type may often not be sufficient. Therefore, it is also possible to register different configurations and make use of them in different parts of the Studio.

To achieve this, simply add an additional module to the @coremedia-blueprint/studio-client.main.ckeditor5 package (just like the existing ckeditorDefault.ts module). You can now customize the editor configuration of this new module as you wish.

This module can then be imported in your ckeditor.ts, which exports a more advanced initEditor function:

import { createDefaultCKEditor } from "./ckeditorDefault";
import { createCustomCKEditor } from "./ckeditorCustom";

export default function initEditor(type:string = CKEditorTypes.DEFAULT_EDITOR_TYPE):(domElement:HTMLElement) => Promise<ClassicEditor> {
  switch (type) {
    case CKEditorTypes.DEFAULT_EDITOR_TYPE:
      return (domElement) => createDefaultCKEditor(domElement);
    case "custom":
      return (domElement) => createCustomCKEditor(domElement);
    ...
  }
};

This is where the type parameter comes into play and determines which editor configuration to return. You can then register all different editors in a Studio plugin like shown in Section 9.6.6.3, “Registering Editor Configurations in Studio”.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.