SchemaItemDefinition (engine/model)
@ckeditor/ckeditor5-engine/src/model/schema
A definition of a schema item.
You can define the following rules:
allowIn
– A string or an array of strings. Defines in which other items this item will be allowed.allowAttributes
– A string or an array of strings. Defines allowed attributes of the given item.allowContentOf
– A string or an array of strings. Inherits "allowed children" from other items.allowWhere
– A string or an array of strings. Inherits "allowed in" from other items.allowAttributesOf
– A string or an array of strings. Inherits attributes from other items.inheritTypesFrom
– A string or an array of strings. Inheritsis*
properties of other items.inheritAllFrom
– A string. A shorthand forallowContentOf
,allowWhere
,allowAttributesOf
,inheritTypesFrom
.- Additionally, you can define the following
is*
properties:isBlock
,isLimit
,isObject
,isInline
. Read about them below.
The is* properties
There are 3 commonly used is*
properties. Their role is to assign additional semantics to schema items.
You can define more properties but you will also need to implement support for them in the existing editor features.
isBlock
– Whether this item is paragraph-like. Generally speaking, content is usually made out of blocks like paragraphs, list items, images, headings, etc. All these elements are marked as blocks. A block should not allow another block inside. Note: There is also the$block
generic item which hasisBlock
set totrue
. Most block type items will inherit from$block
(throughinheritAllFrom
).isLimit
– It can be understood as whether this element should not be split by Enter. Examples of limit elements:$root
, table cell, image caption, etc. In other words, all actions that happen inside a limit element are limited to its content. Note: All objects (isObject
) are treated as limit elements, too.isObject
– Whether an item is "self-contained" and should be treated as a whole. Examples of object elements:image
,table
,video
, etc. Note: An object is also a limit, soisLimit()
returnstrue
for object elements automatically.isInline
– Whether an item is "text-like" and should be treated as an inline node. Examples of inline elements:$text
,softBreak
(<br>
), etc.
Generic items
There are three basic generic items: $root
, $block
and $text
.
They are defined as follows:
this.schema.register( '$root', {
isLimit: true
} );
this.schema.register( '$block', {
allowIn: '$root',
isBlock: true
} );
this.schema.register( '$text', {
allowIn: '$block',
isInline: true
} );
They reflect typical editor content that is contained within one root, consists of several blocks (paragraphs, lists items, headings, images) which, in turn, may contain text inside.
By inheriting from the generic items you can define new items which will get extended by other editor features. Read more about generic types in the Defining schema guide.
Example definitions
Allow paragraph
in roots and block quotes:
schema.register( 'paragraph', {
allowIn: [ '$root', 'blockQuote' ],
isBlock: true
} );
Allow paragraph
everywhere where $block
is allowed (i.e. in $root
):
schema.register( 'paragraph', {
allowWhere: '$block',
isBlock: true
} );
Make image
a block object, which is allowed everywhere where $block
is.
Also, allow src
and alt
attributes in it:
schema.register( 'image', {
allowWhere: '$block',
allowAttributes: [ 'src', 'alt' ],
isBlock: true,
isObject: true
} );
Make caption
allowed in image
and make it allow all the content of $block
s (usually, $text
).
Also, mark it as a limit element so it cannot be split:
schema.register( 'caption', {
allowIn: 'image',
allowContentOf: '$block',
isLimit: true
} );
Make listItem
inherit all from $block
but also allow additional attributes:
schema.register( 'listItem', {
inheritAllFrom: '$block',
allowAttributes: [ 'listType', 'listIndent' ]
} );
Which translates to:
schema.register( 'listItem', {
allowWhere: '$block',
allowContentOf: '$block',
allowAttributesOf: '$block',
inheritTypesFrom: '$block',
allowAttributes: [ 'listType', 'listIndent' ]
} );
Tips
- Check schema definitions of existing features to see how they are defined.
- If you want to publish your feature so other developers can use it, try to use generic items as much as possible.
- Keep your model clean. Limit it to the actual data and store information in a normalized way.
- Remember about defining the
is*
properties. They do not affect the allowed structures, but they can affect how the editor features treat your elements.