We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

insertHtml at cursor

Thread ID:

Created:

Updated:

Platform:

Replies:

150940 Jan 25,2020 02:59 AM UTC Feb 26,2020 05:04 AM UTC Vue 12
loading
Tags: RichTextEditor
Adam
Asked On January 25, 2020 02:59 AM UTC

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 [Syncfusion]
Replied On January 27, 2020 07:16 AM UTC

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> 
 
 
 
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
Replied On January 27, 2020 05:01 PM UTC

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 [Syncfusion]
Replied On January 28, 2020 10:58 AM UTC

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, 
  
  
And also the `getRange` method does exist in the Rich text editor, please find the below documentation link, 
  
  
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
Replied On January 28, 2020 04:26 PM UTC

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 [Syncfusion]
Replied On January 29, 2020 03:55 PM UTC

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 12th 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
Replied On January 30, 2020 12:54 AM UTC

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

Indrajith Srinivasan [Syncfusion]
Replied On January 30, 2020 07:07 AM UTC

Hi Adam, 
 
Thanks for your update 
 
As promised earlier, once the release is rolled out we'll let you know. 
 
Regards, 
Indrajith 


Indrajith Srinivasan [Syncfusion]
Replied On February 12, 2020 09:00 AM UTC

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.  
  
  
  
Can you please update the package to this version to resolve the issue from your end ?   
  
Regards,  
Indrajith 


Adam
Replied On February 20, 2020 01:17 AM UTC

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 [Syncfusion]
Replied On February 20, 2020 04:36 AM UTC

Hi Adam,     
     
Good day to you.  
     
Take your time and we will wait until we get an update from you.     
     
Regards,  
Indrajith 


Adam
Replied On February 25, 2020 08:06 PM UTC

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

Indrajith Srinivasan [Syncfusion]
Replied On February 26, 2020 05:04 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon