New to Kendo UI for Angular? Start a free 30-day trial

Displaying an Input Element in the Editor Component

Environment

ProductProgress® Kendo UI® for Angular Editor

Description

How to render an input element in the Editor component?

Solution

The Kendo UI for Angular Editor component delivers a set of tools for creating, editing, and formatting headers, paragraphs, lists, tables, and other HTML elements. But it is not intended to display buttons, inputs, dropdowns, and any other interactive components.

To display an input inside the Editor's value, you need to modify the default ProseMirror Schema.

  1. Create an input node following the NodeSpec.

    const input = {
        attrs: {
            src: { default: null },
            style: { default: null },
        },
        group: 'block',
        content: 'block*',
        selectable: false,
        parseDOM: [
            {
                tag: 'input',
                getAttrs: (dom: Element): unknown => ({
                    src: dom.getAttribute('src'),
                    style: dom.getAttribute('style'),
                }),
            },
        ],
        toDOM: (node: Node): Array<unknown> => {
            const attrs = {
                src: node.attrs.src,
                style: node.attrs.style,
            };
            return ['input', attrs];
        },
    };
  2. Add the created input node to the schema.

    let nodes = schema.spec.nodes;
    nodes = nodes.addToEnd('input', input);
    export const mySchema: Schema = new Schema({ nodes, marks: schema.spec.marks });
  3. Provide the custom schema to the built-in schema input property of the Editor.

    <kendo-editor ... [schema]="mySchema" ></kendo-editor>
    public mySchema: Schema = mySchema;

The following example demonstrates how to display an input element inside the Editor.

Example
View Source
Change Theme:

In this article

Not finding the help you need?