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. Image for the cookie policy date

Setting Cursor Position after inserting a HTML tag using a dialog

Hey Syncfusion!

First of all, I want to thank you for your amazing product and great support team.

I have made an application containing a RTE. This RTE has a SfDialog that can be opened and in this dialog, there is a SfCombobox, and you can select an item from this list, and finally click on a button that inserts the item to the RTE as an HTML tag.

So when I click on the dialog button to open the dialog on the RTE toolbar, I call the following method:

    private async Task FootnoteClickHandler()
        FootnoteDialogVisible = true;

        if (RteObj != null)
            await RteObj.SaveSelectionAsync();

And I have selected an item from SfComboBox and click on the insert button, the following method is called:

    public async Task AddFootnoteToRTE()
        if (Footnotes != null && RteObj != null)
            await RteObj.RestoreSelectionAsync();

            string? footnoteHtml = null;

            foreach (var footnote in Footnotes)
                if (footnote.FootnoteNumber == FootnoteToBeAdded)
                    footnoteHtml = "<span contenteditable='false' id='footnote " + footnote.FootnoteId + "' class='ac-wysiwyg-footnote'>" + footnote.FootnoteNumber + "</span> ";


            if (RteObj != null && footnoteHtml != null)
                await RteObj.ExecuteCommandAsync(CommandName.InsertHTML, footnoteHtml);

After I do this, the tag is inserted as shown on the image below:

RTE - After inserting HTML tag example.PNG

My problem is that the cursor position is still inside the HTML tag and I want a space after the tag, but I have tried multiple things, and I can't seem to get it right.

In addition I would want the dialog modal to close after I have clicked on the insert button. I have tried to figure this out myself with the FocusAsync() method, but can't get it right either.

Could you assist me in getting these 2 issues right? Would be greatly appreciated.

I have provided the Razor component where I use the RTE as well.

Best regards


Attachment: Code_6f5bcc3d.rar

5 Replies 1 reply marked as answer

IS Indrajith Srinivasan Syncfusion Team February 16, 2023 10:34 AM UTC

Hi Runi,

Greetings from Syncfusion support,

You can insert a space after the inserted HTML element, by adding the `&nbsp;` at the end of the inserted HTML. It acts as a non-zero width space and space will be created when inserting the text. Also, you can close the dialog by setting the visible property of the dialog to false. We have also prepared a sample that tries to meet your requirements,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CursorFocus-723474994

Can you please check the above shared sample, and let us know if it meets your requirements,



Marked as answer

RT Rúni Terjason Hansen February 16, 2023 01:37 PM UTC

Hi Indrajith,

Thanks a lot for the demo, it works fine with the  &nbsp; sign (weird that I haven't thought about that).

In the previous post of mine it seems that I forgot to mention that the issue with closing the dialog, was not setting the visible property, but that after the dialog is closed the RTE loses focus, and focus is set on the DialogButton somehow. This happens in my application as well as the demo you provided.

Can you help me with this as well?

Best regards,


VY Vinothkumar Yuvaraj Syncfusion Team February 17, 2023 04:33 PM UTC

Hi Runi,

We would like to suggest using the FocusAsync method to focus on the Rich Text Editor. Please find the code below for your reference:

  private async Task ClickHandler()


        await this.rteObj.FocusAsync();


You can also refer to our API documentation at the following link for more information: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_FocusAsync

Attachment: CursorFocus723474994_(2)_a2a65543_9a1f082c.zip

RT Rúni Terjason Hansen February 20, 2023 12:21 PM UTC

Hi Vinothkumar!

Excellent, this solution worked perfectly for me.

The issue was resolved by moving the FocusAsync() method to the correct location.

Thank you once again for your outstanding support!

Best regards,


VJ Vinitha Jeyakumar Syncfusion Team February 21, 2023 05:10 AM UTC

Hi Rúni,

We are glad to assist you.


Live Chat Icon For mobile
Up arrow icon