Displaying а Button Inside the Editor Value

Environment

Product

Progress® Kendo UI for Angular Editor

Description

How to display a button inside the Editor's value?

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 a button inside the Editor value, you need to modify the default ProseMirror Schema.

1. Create a button node following the NodeSpec.

   ts

   const button = {
     attrs: {
       class: { default: null },
       style: { default: null },
     },
     group: 'block',
     content: 'block*',
     parseDOM: [
       {
         tag: 'button',
         getAttrs: (dom: Element): any => ({
           style: dom.getAttribute('style'),
           class: dom.getAttribute('class'),
         }),
       },
     ],
     toDOM: (node: Node): Array<any> => {
       const attrs = {
         src: node.attrs.src,
         style: node.attrs.style,
       };
       return ['button', attrs, 0];
     },
   };

2. Append the created button node to the schema.

   ts

   let nodes = schema.spec.nodes;
   nodes = nodes.addToEnd('button', button);
   const marks = schema.spec.marks.append();
   
   // Create the new schema.
   const myCustomSchema: Schema = new Schema({ nodes, marks });

3. Provide the custom schema to the built-in schema input property of the Editor.

   html

   <kendo-editor ... [schema]="mySchema" ></kendo-editor>

   ts

   public mySchema: Schema = myCustomSchema;

The following example demonstrates how to display a button inside the Editor.

Change Theme

Theme

Loading ...