Support the documentation
This documentation was written by volunteers. Please help support our effort:
This page is not yet fully completed - we are still working on the content here. Expect some rough edges 🙃
The inline editor of Neos CMS (CKEditor) is very extensible. The following video gives an overview on how to hook in there:
You can help us!
The Neos UI supports both CKEditor4, and the new CKEditor5. In Settings.yaml, under the key Neos.Neos.Ui.frontendConfiguration.defaultInlineEditor you can configure which editor to use.
For all new projects, we recommend using CKEditor5, which is also the default. This page will explain CKEditor5 only.
In CKEditor5, there are three main parts which are relevant:
- the model is the abstract tree of content. This is no HTML, but a more abstract structure.
- The model is converted to the view prior to rendering. The view is HTML.
- Then, the view is converted to the actual DOM - at this point only minor adjustments are made like inserting spacer <br /> tags where necessary.
For every change, the model is updated accordingly; which then updates the view and the DOM automatically (through a reactive system).
The process of converting data between the different representations is called downcasting and upcasting.
CKEditor5 features an Inspector tool, which helps to understand the current model and view structure of an editor.
To see the inspector in Neos, install the Sandstorm.CkEditorInspector package - then, in the development context, you see the CKEditor inspector popping up as soon as you select a text element.
Using that inspector, you can:
- understand the CKEditor model with all properties
- see the rendered view
- see the current selection
- execute commands