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

Displaying an Input Element in the Editor Component


ProductProgress® Kendo UI® for Angular Editor


How to render an input element in the Editor component?


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.

    // Define the specification for the custom "input" node
    const input: NodeSpec = {
        // Define attributes with their default values
        attrs: {
        src: { default: null }, // Default source attribute
        style: { default: null }, // Default style attribute
    // Indicate that the node belongs to the "block" group
    group: 'block',
    // Define the allowed content within the node (in this case, other block nodes)
    content: 'block*',
    // Make the node not selectable
    selectable: false,
    // Define parsing rules for the DOM representation
    parseDOM: [
        tag: 'input', // Parse <input> tags
            getAttrs: (
                dom: HTMLElement | string
            ): Record<string, any> | false | null => {
                if (typeof dom === 'string') {
                // Handle style rule case here if needed
                return null; // Return null for style rule
            } else {
          // Extract attributes from the DOM element
                return {
                    src: dom.getAttribute('src'),
                    style: dom.getAttribute('style'),

// Define how to serialize the node to a DOM representation toDOM: (node): [string, ...any[]] => ['input', node.attrs], };

// Get the existing node definitions
let nodes = schema.spec.nodes;

// Add the custom "input" node to the existing nodes
nodes = nodes.addToEnd('input', input);

// Create the schema with the updated nodes and existing marks
export const mySchema: Schema = new Schema({ nodes, marks: schema.spec.marks });
  1. 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 });
  2. 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.

View Source
Change Theme:

In this article

Not finding the help you need?