Kendo Angular Editor setHTML: Insert HTML Content at specific position or after cursor

Question

The available command setHTML replaces the existing content. Is there any way to insert HTML content at specific position as insertText.

Answer 1

After long research I found that currently there is no built-in way to get this done. However there is a workaround provided at Telerik forums.

Forum link: insert-html-content-to-editor

Example

public insertHTML(editor: EditorComponent) {
editor.exec('insertText', { text: '#CURSOR#' });
// Replace cursor placeholder with new HTML and set the new editor value.
editor.value = editor.value.replace(/#CURSOR#/, this.strResult);
}

Answer 2

Alternatively,

import { DOMParser as ProseDOMParser } from "prosemirror-model";

public insertHTML(htmlString: string) {
    const view = this.editor.view;
    const state = view.state;

    const parser = new DOMParser();
    const tmpNode = parser.parseFromString(htmlString, 'text/html');

    const domParser = ProseDOMParser.fromSchema(schema);
    const newNodes = domParser.parse(tmpNode);

    view.dispatch(state.tr.insert(state.selection.head, newNodes));
}

The workaround by Telerik did not work for my custom schema properly, this one does.