loading table of contents...

Studio Developer Manual / Version 2310

Table Of Contents Glance at CKEditor 5 Architecture

This section will provide a rough glance at the architecture of CKEditor 5 with focus on the data layer, which is important to understand for CoreMedia Rich Text 1.0 integration. You will find much more details on the architecture at Introduction to CKEditor 5 architecture. And within that, you will find a detailed documentation of the various layers in CKEditor 5 at Editing engine.

CKEditor 5 Editing Layers
CKEditor 5 Editing Layers

Figure 10.1. CKEditor 5 Editing Layers

Figure 10.1, “CKEditor 5 Editing Layers” shows how different layers are involved dealing with CoreMedia Rich Text 1.0. Starting at reading CoreMedia Rich Text 1.0 from server, the processing steps are as follows:

  1. Initial Data on Server:

    As you see, CoreMedia Rich Text 1.0 provides only a small subset of what HTML offers. Element <h1> is unknown, and instead represented as <p class="p--heading-1">. Anchor attribute href is also unknown and instead CoreMedia Rich Text 1.0 relies on attributes as defined by XLink schema such as xlink:href. The value of xlink:href refers to a content with ID 42 here.

  2. REST/read:

    Studio REST backend transforms content-URIs to a shortened format: content/42 instead of coremedia:///cap/content/42.

  3. data-converter/toView:

    The RichTextDataProcessor applies the following transformations before the data enter the world of CKEditor 5 (starting with the data view):

    • <p class="p--heading-1"> is transformed to <h1>. This follows the design principle as described in Section, “Design Principle: HTML First”.

    • The link content/42 received from Studio server is rewritten to content:42 and set as href of the anchor rather than the corresponding XLink attribute. This eases CKEditor 5 plugins to accept the reference as normal URL with a custom link scheme content: and reduces the efforts to hook deeply into corresponding plugins.

  4. upcast:

    This is CKEditor 5 terminology: As the model layer takes the lead, CKEditor 5 leverages the incoming data view to its model representation. The model knows about cursor positions, selection ranges and represents inline styles as attributed texts rather than elements around text (shown in graph with square brackets).

  5. editingDowncast:

    Now CKEditor 5 prepares the editing view for the editors. Classes are applied to highlight selections, possibly empty block elements get some so called filler elements, which ensure, that the cursor can be placed inside that element, and more.

    For Studio integration, for example, BLOB references are resolved here, so that some image or placeholder symbol is shown.

The way back from edited text to the date stored on server is similar. For data-processing it is important to respect: Mappings have to be bijective: As <p class="p--heading-1"> mapped to <h1> in toView mapping, it now needs to be transformed back from <h1> to <p class="p--heading-1">. This also means, that when creating the data view representation, you must add enough information, so that, when returning from editing view, the original state can be restored.

Relevant Change Detection

As you may guess from the previous transformation process, data set at CKEditor 5 may contain subtle differences when returning from processing through the various layers. Examples are ignorable whitespace possibly stripped or class-attribute values, which got re-ordered.

Such semantically equal data must not trigger, for example, auto-checkout in CoreMedia Studio, as it would trigger content items to be checked out by the current editor. Without being aware of this, an editor would check out a content item just by opening it in CoreMedia Studio. If this succeeds, other editors will be blocked from editing — if it fails due to missing permissions the corresponding editor would receive an alert message instead.

For the integration of CKEditor 5 into CoreMedia Studio this is prevented by validating the model state of CKEditor 5 (see Document and corresponding property version). Only if this validation signals a change from previously set data, auto-checkout is triggered.

For details have a look at CoreMedia CKEditor 5 Plugins regarding the Autosave feature. Understanding these may be important if you want to integrate CKEditor 5 into custom components.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

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