Setting Cursor Position after inserting a HTML tag using a dialog

[Rúni Terjason Hansen]

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

                    break;
                }
            }

            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:

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

Rúni

Attachment: Code_6f5bcc3d.rar

[Indrajith Srinivasan]

Hi Runi,

Greetings from Syncfusion support,

You can insert a space after the inserted HTML element, by adding the ` ` 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,

Regards,

Indrajith

[Rúni Terjason Hansen]

Hi Indrajith,

Thanks a lot for the demo, it works fine with the    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,

Rúni

[Vinothkumar Yuvaraj]

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

[Rúni Terjason Hansen]

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,

Rúni

[Vinitha Jeyakumar]

Hi Rúni,

We are glad to assist you.

Regards,

Vinitha