Studio Developer Manual / Version 2204
Table Of Contents
Warning
Please note: The way to register different types of editors as described in this section is highly experimental and
will probably change in future releases. Customers should not rely on any CKEditor Studio API for now.
(Such as ckEditorFactory or CKEditor5Wrapper)
Editor configurations need to be registered in the ckEditorFactory to use them in RichTextPropertyFields or RichTextAreas.
Please see Example 9.43, “Registering Editor Configurations in Studio”:
import ckEditorFactory from "@coremedia/studio-client.ckeditor-factory/util/ckEditorFactory";
import CKEditor5Wrapper from "@coremedia/studio-client.ext.ckeditor-base/CKEditor5Wrapper";
import initEditor from "@coremedia-blueprint/studio-client.main.ckeditor5";
...
ckEditorFactory.registerConstructor("default", (editorType) => {
return new CKEditor5Wrapper(initEditor(editorType));
}, 5);
...
Example 9.43. Registering Editor Configurations in Studio
This is how you register a CKEditor wrapper with a function that initializes a CKEditor. The registerConstructor
method expects 3 parameters:
editorTypeThis is the type of your editor. You can register different configurations under different types. The default editor is registered as "default". In Example 9.43, “Registering Editor Configurations in Studio” we would override the existing default editor with our customized editor.
constructorFunctionYou will need to provide a function that takes an
editorTypeand returns aCKEditorWrapper, in this case a wrapper for a CKEditor 5. You will need to pass the init function of your new CKEditor package to the wrapper's constructor to initialize it properly.majorVersionTo make the editorFactory work properly you must also pass the major version of your CKEditor as the third parameter.
Editor types should be registered in Studio plugins to make them available right away. Please remember that you can register different customizations under different types.
You will then have to pass the correct type to your rich text component:
Config(RichTextPropertyField, {
itemId: "exampleEditor",
hideLabel: true,
editorType: "customEditor",
propertyName: "data",
}),
Example 9.44. Usage of editorType in RichTextPropertyField
In Example 9.44, “Usage of editorType in RichTextPropertyField”, we reference an editor with the editorType "customEditor". If you want to reference the editor with the "default" type, simply omit the
editorType property.
If you register different editors under the same type, previous configurations will be overridden. You will also override the default editor by registering a new one under the same type as shown in Example 9.43, “Registering Editor Configurations in Studio”.
