CODEWITHSUNDEEP
angularkendo-editorkendo-angular-ui
Ganesh Matkam
Ganesh Matkam

Reputation: 368

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

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

Upvotes: 2

Views: 1954

Answers (2)

Lukas Rotter
Lukas Rotter

Reputation: 4188

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.

Upvotes: 1

Ganesh Matkam
Ganesh Matkam

Reputation: 368

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);
}

Upvotes: 1

Related Questions