Insert HTML content to Editor

5 posts, 0 answers
  1. Ming
    Ming avatar
    3 posts
    Member since:
    Mar 2020

    Posted 23 May Link to this post

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

  2. Petar
    Admin
    Petar avatar
    16 posts

    Posted 26 May Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Ming
    Ming avatar
    3 posts
    Member since:
    Mar 2020

    Posted 26 May in reply to Petar Link to this post

    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

  4. Petar
    Admin
    Petar avatar
    16 posts

    Posted 27 May Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Ming
    Ming avatar
    3 posts
    Member since:
    Mar 2020

    Posted 27 May in reply to Petar Link to this post

    Hello Petar,

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

    Kind Regards

    Ming

     

     

     

Back to Top