Warning

This chapter describes how to customize RichText Property Fields, based on CKEditor 4 in CoreMedia Studio. Please note, that CKEditor 4 will be deprecated in CoreMedia Studio and replaced with CKEditor 5 as the default editor within an upcoming AEP release. Even though CKEditor 4 can still be activated and used then, we recommend to migrate to CKEditor 5 as soon as possible. Because of its new architecture, you will not be able to use old CKEditor plugins with CKEditor 5 any more and it is therefore not advised to add customizations for the current CKEditor 4.

If you plan to start migrating or adding new plugins before the next release, you can already switch to a preview version of CKEditor 5 in CoreMedia Studio. See Section 9.6.6.1, “Activating CKEditor 5 Preview” to learn about how to activate the CKEditor 5 preview in CoreMedia Studio.

A richtext property field consists of the richtext toolbar and a WYSIWYG editing area, the richTextArea, which is a wrapper for an instance of the CKEditor. The CKEditor provides richtext editing features via plugins. It is important to note that Ext JS and CKEditor are independent and offer their own JavaScript API.

The richtext toolbar is a standard Ext JS toolbar and contains buttons and menu items that perform richtext-related actions. There are a predefined set of buttons which are activated on this toolbar, which may be configured. This is described in Section 9.6.5.5, “Customizing Richtext Toolbar”. It is possible to add or remove buttons or menus from the toolbar. This may be done for predefined and custom actions.

The richtext property field comes with a set of predefined actions which can be activated, deactivated or configured. At the end of this section is a list of configuration options for these actions.

Most of these actions are wired closely to the CKEditor in the sense that the actions invoke CKEditor commands, which in turn are defined by CKEditor plugins. Some of these plugins like pastefromword use CKEditor dialogs (with custom CoreMedia styles to better integrate into the Studio UI).

Other actions are plain Ext JS actions (maybe using an Ext JS dialog) that interact with the CKEditor directly via its API.

It is also possible to define custom actions by writing plugins for the richtext property field or by using CKEditor plugins directly. This is described in Section 9.6.5.6, “Customizing CKEditor”.

As with the predefined actions, you may write custom actions which invoke CKEditor commands or write custom Ext JS actions which use the CKEditor API. This is described in Section 9.6.5.7, “Interacting with the CKEditor via API”

You can remove entire CKEditor plugins if required. When you do so, you should also remove the corresponding buttons or menu items that are wired to commands defined in that plugin.

The following is a list of configuration options for predefined richtext actions: