Using a component in CKEditor 5
You need to activate the ui_patterns_ckeditor5 sub-module.
Components become widgets of the rich text editor: an editor inserts one from the toolbar, configures it in a dialog with the Component form, sees a preview in the text, and edits or deletes it later from the widget toolbar.
Configuring a text format (/admin/config/content/formats)
On a text format using CKEditor 5:
- enable the "Embed components" filter;
- drag the "Component" button into the toolbar.
The button is only available when the filter is enabled: the filter is what renders the components on the page.
Editing
The "Component" button opens a dialog. Choose a component, fill its props and slots, and click "Embed". The component is inserted as a widget showing a preview of what the page will render. A component without any visible output shows its name instead.
Click a widget to get its toolbar: the pencil opens the dialog again, with the component already chosen and its form filled; the bin removes it.
Contextual data sources
| Context | Source | Prop type |
|---|---|---|
| Content entity | [Entity] ➜ [Field] | |
| Content entity | [Entity] Link | URL |
| Content entity | Token |
The entity is the one whose text is edited: the node of the node form, the paragraph of a paragraph form. On a form creating a new entity, the sources get a sample entity of the same bundle until the entity is saved.
What is saved
The text holds a <drupal-component> tag per widget, with the component ID and its configuration:
<drupal-component data-component-id="my_theme:card" data-component-settings="{…}"></drupal-component>
The "Embed components" filter replaces each tag by the rendered component. A tag whose component does not exist, or whose configuration can not render, is dropped and logged.
Limitations
- The preview shown in the editor does not load the libraries (CSS, JavaScript) of the component. The page does.
- Which components a text format may embed is not configurable yet: all of them are offered.