Online Editor product guide¶
What is Online Editor¶
Online Editor is the interface for editing RichText fields in any content item in Ibexa DXP. It offers standard editing capabilities and extensibility points to customize the editing experience and the available elements.
Online Editor is based on CKEditor 5.
Availability¶
Online Editor is available in all supported Ibexa DXP versions and editions.
How to get started¶
Online Editor is the default editing interface for all RichText fields. To start using it, create any content item with a RichText field (for example, based on the built-in Article content type) and edit this field.
Capabilities¶
Rich Text editor¶
Online Editor covers all fundamental formatting options for rich text, such as headings, lists, tables, inline text formatting, anchors, and links. It also allows embedding other content from the repository, but also from Facebook, Twitter, or YouTube.
Links¶
All links added to a RichText field by using the link element are listed and can be managed in the Link manager.
Distraction free mode¶
While editing Rich Text fields, you can switch to distraction free mode that expands the workspace to full screen.
For more information, see Distraction free mode.
Custom tags¶
Custom tags are customizable RichText elements for which you can specify attributes and render them with custom templates.
Custom tags can be created by means of specifying two things only:
- YAML configuration
- relevant Twig templates
The YAML configuration defines a custom tag’s attributes, the template used to render it, and where in the toolbar the tag is available.
See Extend Online Editor for a full example.
Custom styles¶
Custom styles allow specifying custom predefined templates for specific RichText elements.
Custom styles differ from custom tags in that they don't have attributes configured. A custom style requires YAML configuration that points to a template used to render an elements with this style.
See Extend Online Editor for a full example.
Custom data attributes and CSS classes¶
For each RichText element type, you can configure custom data attributes or CSS classes that the user can select when working in Online Editor.
Custom data attributes allow adding new attributes to existing Rich Text elements, such as headings or lists, which are added in the form of data-ezattribute-<attribute_name>="<value>".
For more information, see Extend Online Editor.
Custom CSS classes work in a similar way, giving editor a choice of classes to add to any type of element.
For more information, see Extend Online Editor.
Plugins¶
Because Online Editor is based on CKEditor 5, you can use CKEditor's capabilities to create plugins for the editor.
Benefits¶
Familiar editing tools¶
Online editor offers rich text editing tools familiar to most editors and contributors, which allows quick adoption to the editorial flow.
The editor's toolbars can be customized and reorganized to for the specific project's needs.
Customizable text elements¶
The range of available text elements can be extended by offering custom elements and custom formatting options.
Custom formatting options can be offered either as custom CSS classes that editors can add to specific elements, or as custom styles which can have their own templates.
More extensive customization is available via custom tags:
- completely custom RichText elements that you can fully configure
- custom CKEditor 5 plugins
Use cases¶
Customizable Call to action buttons¶
Online Editor extensibility offers a simple way to create custom elements such as Call to action (CTA) buttons. Creating a CTA custom tag lets you use a template to construct a button element. Then, you can add a link attribute to provide target for the button, and a style attribute with different presets to style its look.
Refer to Extend Online Editor for a similar use case.
Embed external resources¶
Custom tags allow embedding content from external resources inside RichText fields. The built-in elements offer embedding of Twitter or Facebook posts, but you can extend the capability by embedding other resources. These can be, for example, 3D product, or real estate viewers.