Insert HTML content to Editor

[Ming]

There is no insertHTML command for Angular Kendo Editor.

 I tried InsertText, however, it will show all html tag in editor. How to resolve this issue?

 

Please see code below:

   var strResult =  "<p></p>" 
    +"<span style='font-weight:bold'>CBC, Manual Diff if Indicated (2020-03-17 13:30:00.000)</span>"
   +"<p></p>"
    +"      [MCH]"
     +" 27.1 N 27.0-32.0 "
    +"<p></p>" 
    +"      ["
    +"Platelet Count"
    +"]"
     +"  290 N 150-450";

    editor.exec('insertText', { text: strResult});

[Petar]

Hi Ming,

Thanks for the provided code.

Indeed the EditorComponent does not have 'insertHTML' command, instead there is a setHTMLcommand. Here is an example:

 https://stackblitz.com/edit/angular-fway1h?file=app/app.component.ts.

Another option to set the HTML content would be to set the contents of the <kendo-editor> through the value property like so:

https://stackblitz.com/edit/angular-fway1h-n6nted?file=app/app.component.ts.

Having said that if the goal is to insert some HTML at a specified position, we can utilize any of the aforementioned approaches:

https://stackblitz.com/edit/angular-fway1h-smqtb5?file=app/app.component.ts.

The key point here is that when setting the value either through the value property or through the setHTML command, the contents of the Editor are replaced with what has been passed to value/setHTML and we have to take care for inserting the new HTML. In the provided example this is done like so:

public insertHTML(editor: EditorComponent, position: number) {
  editor.value =
    editor.value.slice(0, position) + // take the portion of the old value up until the needed position
    this.strResult + // insert HTML
    editor.value.slice(position); // append rest of the old value
}

I hope this helps. Please let me know if further assistance is needed.

Regards,
Petar
Progress Telerik

[Ming]

Thanks a lot. Petar.

 

I do have a follow-up question. How do I get cursor position of Editor.  That is the position I am going to insert HTML content.

 

Ming

[Petar]

Hi Ming,

Currently there is no built-in way to get the position of the cursor. However there is a workaround. Here is an updated example - https://stackblitz.com/edit/angular-fway1h-7ydfj2?file=app/app.component.ts

There are few important steps:

1. Before inserting the HTML, we can create a placeholder text for the cursor at the current position using 'insertText' command. By default if from and to are not provided to 'insertText', text inserted after the current cursor position. More info can be found here - https://www.telerik.com/kendo-angular-ui/components/editor/api/EditorComponent/#toc-exec. Having that in mind we can do as follows:
   

     public insertHTML(editor: EditorComponent) {
       // Replace '#CURSOR#' with whatever string you think would work best
       editor.exec('insertText', { text: '#CURSOR#' });
       // ...
     }

2. After the placeholder text has been placed, we can replace it with the new HTML and then set the new value of the editor like so:
   

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

I hope this helps. Feel free to write back if more questions on the topic arise.

Regards,
Petar
Progress Telerik

[Alfonso]

i have a related question, but rather than inserting text, i want to add my own custom tag.  I've already added a new Mark in the schema, but how do i get the begin and end of a selected text?  i don't just want to insert text, i want to wrap the highlighted text with my own custom tag. like:

selected text

becomes

<t1>selected text</t1>

[Yanmario]

Hi Alfonso,

One possible way to get the selection range would be through the EditorView instance which provides the state and selection API from the ProseMirror library.

The following knowledge base article demonstrates the use of this API to get the cursor position:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/editor-cursor-position/

Feel free to also check their discussion section as it might have useful information for such custom implementations.

https://discuss.prosemirror.net/

I hope this helps.

Regards,
Yanmario
Progress Telerik

 

[Ming]

Hello Petar,

Great, I will let you know if I have any further questions.

Kind Regards

Ming