insertHtml at cursor

[Adam]

Hello all,

I am building a custom button for the RichTextEditor, and I'm having a small issue. My button, when clicked, will display a modal dialog with some options. When the user accepts the options the dialog closes and I insert markup into the editor using the command "insertHTML". The markup gets inserted, but it always inserts my markup at the beginning of content. I'd like it to insert where the cursor last was. Is this possible?

Thanks!

[Revanth Krishnan]

Hi Adam, 

 

Greetings from Syncfusion support. 

 

Query: ‘Is it possible to use the `insertHTML` command at the last placed cursor position?’. 

 

Yes, it is possible to use the `insertHTML` command to insert the content at the last placed cursor position. This can be done by doing the following, 

1. Get the range and then save the selection when the custom button is clicked.
2. Then before the `insertHTML` command in used, restore the selection to insert the content at the last placed cursor position.

 

Please refer the below code Snippet and the sample, 

 

Code Snippet: 

 

<script> 

export default Vue.extend({ 

  data: function() { 

    return { 

  methods: { 

    onCreate: function(e) { 

      this.customBtn = document.getElementById("custom_tbar"); 

      this.$refs.dialogObj.ej2Instances.target = document.getElementById( 

        "rteSection" 

      ); 

      var proxy = this; 

      this.customBtn.onclick = function(e) { 

        proxy.$refs.rteObj.ej2Instances.contentModule.getEditPanel().focus(); 

        proxy.range = proxy.selection.getRange(document); 

        proxy.saveSelection = proxy.selection.save(proxy.range, document); 

        proxy.$refs.dialogObj.ej2Instances.content = document.getElementById( 

          "rteSpecial_char" 

        ); 

        proxy.$refs.dialogObj.ej2Instances.dataBind(); 

        proxy.$refs.dialogObj.show(); 

      }; 

    }, 

    onInsert: function() { 

      debugger; 

      var insertHTMLContent; 

      if (this.$refs.insertMarkup.ej2Instances.value === "Markup1") { 

        insertHTMLContent = "<p>Markup 1 content</p>"; 

      } else { 

        insertHTMLContent = "<p>Markup 2 content</p>"; 

      } 

      if (insertHTMLContent !== "") { 

        if ( 

          this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack().length === 

          0 

        ) { 

          this.$refs.rteObj.ej2Instances.formatter.saveData(); 

        } 

        this.saveSelection.restore(); 

        this.$refs.rteObj.ej2Instances.executeCommand( 

          "insertHTML", 

          insertHTMLContent 

        ); 

        this.$refs.rteObj.ej2Instances.formatter.saveData(); 

      } 

      this.dialogOverlay(); 

    }, 

  provide: { 

    richtexteditor: [Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar] 

  } 

}); 

</script> 

 

 

Sample: https://codesandbox.io/s/vue-template-rfdul 

 

Could you please try-out the above sample and code snippet and confirm whether it meets your requirement? If the above-shared sample doesn’t meet your requirements, kindly share more details regarding your requirement to provide an appropriate solution at the earliest. 

 

Thanks, 

Revanth 

[Adam]

In your sample, on line 14 I see this:

proxy.range = proxy.selection.getRange(document); 

However I do not see where the variable selection is defined. I do see that the RichTextEditor control has a getRange method. Is that what you meant to put there?

[Revanth Krishnan]

Hi Adam, 

 

We have validated your query, the selection variable was declared before the methods function, please check the selection variable in the below sample, 

  

Sample: https://codesandbox.io/s/vue-template-rfdul 

  

And also the `getRange` method does exist in the Rich text editor, please find the below documentation link, 

  

Documentation Link: https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#getrange 

  

Could you please try-out the above sample and confirm whether it meets your requirement? If the above-shared sample doesn’t meet your requirements, kindly share more details regarding your requirement to provide an appropriate solution at the earliest. 

  

Thanks, 

Revanth 

[Adam]

Thank you for the example. I'll give it a try. However, it still does not behave correctly each time. Using your sandbox example, when I use the button to insert multiple times in succession, the markup does not get inserted in the correct place after the first time (note it does work the first time). Here are the steps to reproduce.

1. Place your cursor at the end of the content (right after the word "popup.". Press the Enter key to create a new paragraph
2. Click Custom Button, and select "Markup 1", then press Insert
3. Observe that the content "Markup 1 content" is inserted in the correct position (so far so good). Also observe that the cursor is at the end of the newly inserted line.
4. Now press the Custom Button again. Select "Markup 2" and press Insert
5. Observe that the content "Markup 2 content" is now placed at the top of the content, which is not what I would expect

The solution you provided will get me part of the way there, but this other behavior is certainly unexpected.

[Indrajith Srinivasan]

Hi Adam, 

  

This issue is raised on using an externally rendered dialog component and focus changes over the components in it, which affects the RichTextEditor focus and it is resetted to the initial state. We have confirmed “markup does not get inserted in the correct place after the first time” as a bug from our end and logged the report for the same and the fix will be included in our upcoming patch release scheduled to be roll-out on 12^th February. 

  

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/11644/ 

  

Regards, 

Indrajith 

[Adam]

Thanks so much for looking into this and working with me on it Recanth. I appreciate it.

[Indrajith Srinivasan]

Hi Adam, 

 

Thanks for your update 

 

As promised earlier, once the release is rolled out we'll let you know. 

 

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Adam,  

   

Thanks for your patience, 

   

We have resolved the issue “Markup does not get inserted in the correct place after the first time” with RichTextEditor and the fix is now available with the package version 17.4.49. We have also prepared a sample based on your requirement.  

  

Release Notes: https://ej2.syncfusion.com/vue/documentation/release-notes/17.4.49/#richtexteditor 

  

Sample:  https://codesandbox.io/s/vue-template-cfgs7  

  

Can you please update the package to this version to resolve the issue from your end ?   

  

Regards,  

Indrajith 

[Adam]

I'm sorry I haven't had a change to test this again yet. I will get to it shortly and report back what I find.

[Indrajith Srinivasan]

Hi Adam,     

     

Good day to you.  

     

Take your time and we will wait until we get an update from you.     

     

Regards,  

Indrajith 

[Adam]

Looks pretty good! Thanks so much for all your help!

[Indrajith Srinivasan]

Hi Adam,

Welcome, we are glad that your reported issue is resolved. Please let us know if you need any further assistance on this.

Regards, 

Indrajith 

[David]

The easiest way in my eyes is to store the range (defines the cursor position) before the desired action with `component.getRange()` and then shortly before executing `insertHTML` you use the function `component.selectRange(storedRange)`.

[Revanth Krishnan]

Hi David, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “The easiest way is to store the range (defines the cursor position) before the desired action with `component.getRange()` and then shortly before executing `insertHTML` you use the function `component.selectRange(storedRange)`.” 

 

Yes, we have implemented the same using our public methods. 

`getRange`: Get the currently selected range in the Editor. 

`save`: Saves the retrieved range.

`restore`: This method is used to restore the selection before inserting the content. 

 

So the content is inserted into the already selected cursor point. We have prepared a sample for your reference like you suggested, 

 

Code Snippet: 

 

// Method call on button click. 

this.customBtn.onclick = function(e) { 

    // Get the current selection in the Editor. 

    proxy.range = proxy.selection.getRange(document); 

    // Save the retrieved selection. 

    proxy.saveSelection = proxy.selection.save(proxy.range, document); 

}; 

 

//Method to insert the content 

onInsert: function() { 

    // Restore the saved selection 

    this.saveSelection.restore(); 

    //Inserts the content. 

    this.$refs.rteObj.ej2Instances.executeCommand("insertHTML", insertHTMLContent); 

} 

 

Sample: https://codesandbox.io/s/vue-template-forked-nf7yl 

 

Please check the code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth