CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Typedef

TemplateDefinition (ui)

@ckeditor/ckeditor5-ui/src/template

typedef
Object
See source

A definition of the Template. It describes what kind of node a template will render (HTML element or text), attributes of an element, DOM event listeners and children.

Also see:

A sample definition on an HTML element can look like this:

new Template( {
    tag: 'p',
    children: [
        {
            tag: 'span',
            attributes: { ... },
            children: [ ... ],
        },
        {
            text: 'static–text'
        },
        'also-static–text',
    ],
    attributes: {
        class: TemplateValueSchema,
        id: TemplateValueSchema,
        style: TemplateValueSchema

        // ...
    },
    on: {
        'click': TemplateListenerSchema

        // Document.querySelector format is also accepted.
        'keyup@a.some-class': TemplateListenerSchema

        // ...
    }
} );

A View, another Template or a native DOM node can also become a child of a template. When a view is passed, its element is used:

const view = new SomeView();
const childTemplate = new Template( { ... } );
const childNode = document.createElement( 'b' );

new Template( {
    tag: 'p',

    children: [
        // view#element will be added as a child of this <p>.
        view,

        // The output of childTemplate.render() will be added here.
        childTemplate,

        // Native DOM nodes are included directly in the rendered output.
        childNode
    ]
} );

An entire ViewCollection can be used as a child in the definition:

const collection = new ViewCollection();
collection.add( someView );

new Template( {
    tag: 'p',

    children: collection
} );

Filtering

Properties