CKEditor 5 Elements

Appearance

ckeditor5-elements / ElementSchema

Class: ElementSchema ​

Declares the elements of the content in the model schema of the editor, from a simple definition, the elementSchema editor option: a plain object, e.g. a JSON file. It is the list of the elements the content is made of, formatting included: what each one holds, where it goes, and which attributes it has.

json
{
  "note": { "type": "container", "allowAttributes": ["type"] },
  "title": { "type": "block", "allowIn": ["note"] },
  "badge": { "type": "empty", "isInline": true, "allowAttributes": ["color"] }
}

Every element has one of three types, instead of CKEditor's many is* flags and generic items:

  • empty: has no content, like an image. It is an object, selected as a whole. With isInline, it is in a line of text.
  • block: can contain text and inline elements, like a paragraph. With isInline, it is an inline element with text, like a bold, a link or a term, with attributes of its own.
  • container: cannot contain text, but blocks, containers and empty elements, like a block quote.

allowAttributes and allowChildren work as in CKEditor's schema. allowIn too, but it replaces the default places. See ElementSchemaElement.

Two keys make a kind of their own of a type, with its typing:

  • verbatim makes a block keep its whitespace, e.g. code: Enter inserts a new line in it.
  • listItem makes a container a list of its items, e.g. "listItem": "listitem": it holds only its items, and Enter in an item makes the next one.

At the ends of the inline elements with text, the left and right arrow keys move in two steps, as CKEditor's two-step caret movement does at the ends of a bold: in the element, then in the text.

The schema is validated first, and a schema that is contradictory or refers to unknown elements is not accepted: the editor is not created, and the ElementSchemaError lists all the problems (see validateElementSchema).

The elements are registered after the plugins are initialized (in afterInit()), so they can refer to the elements of other plugins, e.g. paragraph. Plugins that extend or convert the elements must do it in afterInit() too, or later; the converters can be declared at any time.

The empty and container elements can be selected as a whole, by a click on them and by the arrow keys, when the ElementSelectable plugin is loaded too: the element schema does not depend on it, and uses it when it is there (with elementSchemaConverters, it warns when it is not).

The plugin declares the schema only: how the elements look in the editor and in the data is declared with converters, or by the plugin with the elementSchemaConverters option: one to one, as div and span (true), or with the names of the elements in the data ('names'), e.g. for XML.

Extends ​

Constructors ​

Constructor ​

ts
new ElementSchema(editor): ElementSchema;

Parameters ​

ParameterType
editorEditor

Returns ​

ElementSchema

Inherit Doc ​

Inherited from ​

Plugin.constructor

Accessors ​

definition ​

Get Signature ​

ts
get definition(): 
  | ElementSchemaDefinition
  | null;

The element schema of the editor, once it is validated and registered (in afterInit()): the elementSchema option. null before, and without the option.

Returns ​

| ElementSchemaDefinition | null

pluginName ​

Get Signature ​

ts
get static pluginName(): "ElementSchema";
Returns ​

"ElementSchema"

Methods ​

afterInit() ​

ts
afterInit(): void;

Returns ​

void