CKEditor 5 ElementsElement-first WYSIWYG editing for CKEditor 5

Customize CKEditor 5 for structured content. The content is a tree of named elements, declared from a JSON file, and every feature acts on an element, formatting included. Save it as HTML, or as XML, such as DocBook XML and DITA XML.

Get started

Try the examples

API reference

Commands

ElementOrPositionCommand knows its title, icon and state for any element, so buttons and menus can use it.

Actions

Move an element up or down, duplicate it as an empty element of the same kind, or delete it.

Clipboard

Copy, cut and paste whole elements, before or after another element, from a menu, a button or code.

Attributes

Show the attributes of an element, as key-value pairs, in a modal, from a menu, a toolbar, a click or code.

Context menu

Right-click an element to get a menu of commands, submenus and separators, configured per element.

Breadcrumbs

The element path at the cursor, as labels or as buttons that open a menu of the element.

Quick insert

Alt+Enter, or a menu item, opens a searchable list of the elements allowed at a position.

Selectable elements

Select an element as a whole, by a click on its frame or by the arrow keys, without widgets.

Clickable elements

Call a function, with the model element, when an element that matches a name or a filter is clicked or double-clicked.

Element toolbar

A floating toolbar for the elements you choose, by name or filter, with buttons that act on the element.

DocBook XML and DITA XML editors

Two WYSIWYG XML editors built with CKEditor 5 Elements, live, with their source. A Simplified DocBook article and a Lightweight DITA topic are edited visually, and saved as XML, element for element.

Element schema

Declare the elements of the content from a JSON file, what each one holds and where it goes, with a validation that rejects contradictions. Give every element a command and a button, formatting included.