close

Filter

loading table of contents...

Studio Developer Manual / Version 2404

Table Of Contents

10.3.12 Providing New CKEditor 5 Configuration By Example

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.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.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";
/* ... */

Example 10.24. Adapting ckeditor.ts


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
      ],
      /* ... */
    ]),
  })
);

Example 10.25. Adapting init.ts


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));
  }
}

/* ... */

Example 10.26. Adapting DetailsDocumentForm


Now you are ready applying highlights to your text.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

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