In this example, you will learn, how to introduce a new configuration and use it for an extended editing feature for a given rich text property.

The example is based on Section 10.1.3.11, “Customizing ckeditorDefault.ts By Example”: Here, you want to apply the same plugin but only make it available to a dedicated content property.

Proceed as follows:

1. Copy And Adapt the Configuration

You start with copying ckeditorDefault.ts to ckeditorCustom.ts. For consistency, it is recommended to also adapt the name of the factory method createDefaultCKEditor. Rename it to createCustomCKEditor.

After that, you apply the same adaptations to the CKEditor 5 instance as described in Section 10.1.3.11, “Customizing ckeditorDefault.ts By Example”.

So, now you have a custom CKEditor 5 configuration with the Highlight plugin enabled.

2. Propagate the Configuration

At the same path as ckeditorDefault.ts you will find a file ckeditor.ts. We expose the factory method in here as shown in Example 10.24, “Adapting ckeditor.ts”.

/* ... */
export { createDefaultCKEditor } from "./ckeditorDefault";
export { createCustomCKEditor } from "./ckeditorCustom";
/* ... */

Now, for referencing the new CKEditor 5 instance within Ext JS components such as rich text property fields, you need to expose it in init.ts of @coremedia-blueprint/​studio-client.​main.​ckeditor5-plugin as can be seen in Example 10.25, “Adapting init.ts”.

import { createDefaultCKEditor, createCustomCKEditor, /* ... */ } from
  "@coremedia-blueprint/studio-client.ckeditor5/";

/* ... */

richTextAreaRegistry.registerRichTextArea(
  RichTextAreaConstants.CKE5_EDITOR,
  Config(CKEditor5RichTextArea, {
    editorTypeMap: new Map([
      [
        CKEditorTypes.DEFAULT_EDITOR_TYPE,
        createDefaultCKEditor
      ],
      [
        "custom",
        createCustomCKEditor
      ],
      /* ... */
    ]),
  })
);

3. Use the Configuration

You want to apply the Highlight feature when editing the detailText of content-type CMTeasable. Thus, you need to adapt DetailsDocumentForm of package @coremedia-blueprint/​studio-client.​main.​blueprint-forms.

The change is as simple as the previous steps. In the items of the DetailsDocumentForm you will find a RichTextPropertyField. As this does not explicitly set an editorType it uses the default CKEditor 5 instance instead.

Now simply add a reference to your new editorType as registered in init.ts mentioned above. Thus, the result will be similar as shown in Example 10.26, “Adapting DetailsDocumentForm”.

/* ... */

class DetailsDocumentForm extends PropertyFieldGroup {
  /* ... */

  constructor(config: Config<DetailsDocumentForm> = null) {
    super(ConfigUtils.apply(Config(DetailsDocumentForm, {
      /* ... */
      items: [
        /* ... */
        Config(RichTextPropertyField, {
          bindTo: config.bindTo,
          itemId: "detailText",
          propertyName: "detailText",
          editorType: "custom", // Enable Highlight Plugin
          initialHeight: 200,
        }),
      ],
      /* ... */
    }), config));
  }
}

/* ... */

Now you are ready applying highlights to your text.