Saving and restoring cursor position

[Rúni Terjason Hansen]

Hi Syncfusion,

I'm trying to be able to focus off the RTE and then selecting an item from a sortable list and then inserting the selected text in the last cursor position.

I've tried multiple things, but I can't seem to get the RTE to save it's cursor position on e.g. the Blur event & then to be restored after an item from the list is selected (or a button is clicked).

I've tried using the rteObj.SaveSelectionAsync() when the Blur event is triggered and then restoring it using rteObj.RestoreSelectionAsync() after a button is clicked, but I can't seem to get it to work.

I'm currently using RichTextEditor v. 20.2.0.48.

Can you guys please help me accomplish this? Maybe even with an example?

Best regards,

Rúni

[Vinitha Jeyakumar]

Hi Rúni,

We have prepared a sample as per your requirement to insert the selected text into the Rich Text Editor by saving its cursor location and retrieving it while inserting the text. please check the code and sample below,

Code snippet:

<SfRichTextEditor @ref="rteObj">

            <RichTextEditorToolbarSettings Items="@Tools">

                <RichTextEditorCustomToolbarItems>

                    <RichTextEditorCustomToolbarItem Name="Symbol">

                        <Template>

                            <button class="e-btn e-tbar-btn" @onclick="ClickHandler">

                                <div class="e-tbar-btn-text" style="font-weight: 500;">Insert Text</div>

                            </button>

                        </Template>

                    </RichTextEditorCustomToolbarItem>

                </RichTextEditorCustomToolbarItems>

            </RichTextEditorToolbarSettings>

            <div style="display:block;"><p style="margin-right:10px">The custom command item<b>Insert Emoticons</b> is added to the Toolbar. Click on the command and choose the emoticon you want to include from the popup.</p></div>

        </SfRichTextEditor>

    </div>

</div>

<SfDialog @bind-Visible="@dialogVisible" ZIndex="1000" ShowCloseIcon="false" IsModal="true" Width="45%" Target="#rteSection">

    <DialogTemplates>

        <Header> Insert Emoticons </Header>

        <Content>

            <SfComboBox TValue="string" TItem="Countries" @bind-Value="@ComboVal" Placeholder="e.g. Australia" DataSource="@Country">

                <ComboBoxEvents TValue="string" TItem="Countries" ValueChange="@onChanged"></ComboBoxEvents>

                <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>

            </SfComboBox>

        </Content>

    </DialogTemplates>

    <DialogButtons>

        <DialogButton Content="Insert" IsPrimary="true" OnClick="OnInsert" Disabled="@disableInsertBtn" />

        <DialogButton Content="Cancel" OnClick="DialogOverlay" />

    </DialogButtons>

    <DialogEvents OnOverlayModalClick="DialogOverlay" />

</SfDialog>

@code{

    SfRichTextEditor rteObj;

    int currentIndex { get; set; } = -1;

    int currentTabIndex { get; set; }

    string activeClass = "e-active";

    private bool dialogVisible { get; set; }

    private bool disableInsertBtn { get; set; } = false;

    public string ComboVal { get; set; }

    public class Countries

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

    List<Countries> Country = new List<Countries>

    {

        new Countries() { Name = "Australia", Code = "AU"},

        new Countries() { Name = "Bermuda", Code = "BM" },

        new Countries() { Name = "Canada", Code = "CA" },

        new Countries() { Name = "Cameroon", Code = "CM" },

    };

    public string insertVal { get; set; }

    public void onChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args)

    {

        this.insertVal = args.Value;

    }

   

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()

    {

        new ToolbarItemModel() { Command = ToolbarCommand.Bold },

        new ToolbarItemModel() { Command = ToolbarCommand.Italic },

        new ToolbarItemModel() { Command = ToolbarCommand.Underline },

        new ToolbarItemModel() { Command = ToolbarCommand.Separator },

        new ToolbarItemModel() { Command = ToolbarCommand.Formats },

        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },

        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },

        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },

        new ToolbarItemModel() { Command = ToolbarCommand.Separator },

        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },

        new ToolbarItemModel() { Command = ToolbarCommand.Image },

        new ToolbarItemModel() { Command = ToolbarCommand.Separator },

        new ToolbarItemModel() { Name = "Symbol", TooltipText = "Insert Text" },

        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },

        new ToolbarItemModel() { Command = ToolbarCommand.Undo },

        new ToolbarItemModel() { Command = ToolbarCommand.Redo }

    };

    

    private async Task ClickHandler()

    {

         await this.rteObj.SaveSelectionAsync();

    }

    private async Task OnInsert()

    {

        await this.rteObj.RestoreSelectionAsync();

        await this.rteObj.ExecuteCommandAsync(CommandName.InsertHTML, this.insertVal);

        this.dialogVisible = false;

           }

  }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Server887086202

Demos(Custom toolbar): https://blazor.syncfusion.com/demos/rich-text-editor/insert-emoticons?theme=fluent

Note: In the above sample, we have used the custom toolbar button to open a dialog which contains a combo box control. when we select and insert a value from the combo box, it will be inserted into the saved cursor location.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Vinitha

[Rúni Terjason Hansen]

Hi

Thank you very much for the sample and notes. I can definitely work with this.

Your support is great.

Best regards,

Rúni

[Vinitha Jeyakumar]

Hi Rúni,

We are glad to assist you.

Regards,

Vinitha