In Section 10.1.3.6, “Adapting Existing Configurations” you learned how to customize configurations that ship with CoreMedia Blueprint. Another option to take is providing new configurations, which then can be used in custom document forms. In this section you will learn how to add and use them.

You will get a rough sketch here, how to add a new configuration. For a detailed walkthrough, have a look at Section 10.1.3.12, “Providing New CKEditor 5 Configuration By Example”. In contrast to the example, which starts next to ckeditorDefault.ts and propagating it up to the document forms, you proceed in reverse, starting with the goal you want to achieve:

In the end, you want to be able to reference your new custom editor by a string key in a configuration property editorType of RichTextPropertyField within one of the forms available in package @coremedia-blueprint/​studio-client.​main.​blueprint-forms, for example.

To declare this custom editor type, you need to adapt init.ts in @coremedia-blueprint/​studio-client.​main.​ckeditor5-plugin and register your new CKEditor 5 instance at editorTypeMap as key-value pair. Key is a descriptor that is then used for reference when configuring the editorType. The value is a factory method of type CreateCKEditorFunction (package @coremedia/​studio-client.​ckeditor-common).

This factory method gets a reference to the DOM element, which should be replaced by the to-be-created CKEditor 5 instance and a CKEditorPluginConfig (again, package @coremedia/​studio-client.​ckeditor-common). Applying this is crucial, as it, for example, provides the bridge from Autosave plugin of CKEditor 5 to storing the data in the server. For details see Section 10.1.3.5, “Basic Configuration of CKEditor 5”.

You can freely choose where to define this factory method. For consistency, it is recommended adding this parallel to ckeditorDefault.ts in @coremedia-blueprint/​studio-client.​ckeditor5 as sketched in Section 10.1.3.12, “Providing New CKEditor 5 Configuration By Example”, where you may want to continue reading to get more details on adding a new configuration.

Respecting Feature Flags

In Section 10.1.3.8, “Using Configuration Feature Flags” you will see, how to use feature flags as part of your configuration. Typically, flags are registered globally by CoreMedia Studio plugins, such as CKEditor5StudioPlugin similar to Example 10.11, “CoreMedia Rich Text 1.0 in CoreMedia Studio”.

rules: [
  Config(CKEditor5RichTextArea, {
    plugins: [
      Config(OnlyIf, {
        isAdministrator: true,
        then: Config(
          CKEditor5FeatureFlagPlugin,
          { featureFlags: ["administrative"] }
        ),
      }),
    ],
  }),
],

You may want to respect such globally available feature flags in your configuration, like, for example, the administrative flag, which is forwarded to all configurations via the example above.

For details regarding usage of feature flags and default flags that ship with CoreMedia Blueprint you may want to respect, see Section 10.1.3.8, “Using Configuration Feature Flags”.