insertHtml at cursor

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!

Reply | Reply with quote

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,

Get the range and then save the selection when the custom button is clicked.
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:

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

Reply | Reply with quote

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?

Reply | Reply with quote

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,

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

Reply | Reply with quote

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.

Place your cursor at the end of the content (right after the word "popup.". Press the Enter key to create a new paragraph
Click Custom Button, and select "Markup 1", then press Insert
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.
Now press the Custom Button again. Select "Markup 2" and press Insert
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.

Reply | Reply with quote

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 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

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

Adam

Replied On February 25, 2020 08:06 PM UTC

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

Reply | Reply with quote

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150940	Jan 25,2020 02:59 AM UTC	Feb 26,2020 05:04 AM UTC	Vue	12

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US