Insert text at current cursor position with client side code

[Richard Weyrauch]

I need to insert text at the current cursor position of a RichTextEditor via client side code. Does anyone have a sample of how to do this? I am concerned that it can be done at all because the insert toolbar commands don't do it right either - they always add the form element or picture to the end regardless of cursor position.

[Meena]

Hi Richard,

 

Thanks for contacting Syncfusion forums.

 

We have updated the response in incident #108220. Please refer that incident and kindly have follow up with the same for further updates.

 

Regards,

Meena

[it]

Hi, 

I want to insert static content to the cursor position of the SfRichTextEditor content area. Please provide a complete example. See the below screenshot to understand my requirement.

In the above screenshot, I have a list of tags on the right side and if I will click on any tag the tag content (Tag 1) should insert into the cursor position in the text editor's content area.

Thanks!

[Vinitha Jeyakumar]

Hi It, 

 

 

Good day to you, 

 

 

We have validated your query “I want to insert static content to the cursor position of the SfRichTextEditor content area” 

 

We have a prepared a sample for your requirement to insert static content to the cursor position in the Rich Text Editor using the ExecuteCommand method and setting the cursor position can be achieved using the jsinterop. Please check the code below, 

 

Code snippet: 

Index.razor 

<SfButton @onclick="@addContent">Set Cursor Pointer</SfButton> 

<SfButton Content="Tag1" @onclick="@Tag1" /> 

<SfButton Content="Tag2" @onclick="@Tag2" /> 

<SfButton Content="Tag2" @onclick="@Tag3" /> 

<SfRichTextEditor ID="defaultRTE" Value="@rteValue" Height="500px" Width="100%" @ref="@RteObj"> 

</SfRichTextEditor> 

 

@code { 

    [Inject] 

    IJSRuntime JsRuntime { get; set; } 

    SfRichTextEditor RteObj; 

    public string rteValue = "<p>The Rich Text Editor is WYSIWYG ('what you see is what you get') editor useful to create and edit content, and return the valid <a rel='nofollow' href='https://ej2.syncfusion.com/home/' target='_blank'>HTML markup</a> or <a rel='nofollow' href='https://ej2.syncfusion.com/home/' target='_blank'>markdown</a> of the content</p><p id='key'><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li><li><p>Capable of handling markdown editing.</p></li><li><p>Contains a modular library to load the necessary functionality on demand.</p></li><li><p>Provides a fully customizable toolbar.</p></li></ul>"; 

 

    public void addContent() 

    { 

        JsRuntime.InvokeAsync<string>("RichTextEditor.setCursorPointer"); 

    } 

    private async Task Tag1() 

    { 

 

        await this.RteObj.ExecuteCommandAsync(CommandName.InsertHTML, "<div>Syncfusion Rich Text Editor component Content of Tag1</div>"); 

    } 

    private async Task Tag2() 

    { 

 

        await this.RteObj.ExecuteCommandAsync(CommandName.InsertHTML, "<div>Syncfusion Rich Text Editor component Content of Tag2</div>"); 

    } 

    private async Task Tag3() 

    { 

 

        await this.RteObj.ExecuteCommandAsync(CommandName.InsertHTML, "<div>Syncfusion Rich Text Editor component Content of Tag3</div>"); 

    } 

} 

Jsinterop.js 

window.RichTextEditor = { 

    setCursorPointer: function () { 

        var rteInstance = document.getElementById('defaultRTE').blazor__instance; 

        var element = rteInstance.inputElement.querySelector('#key'); 

        var range = document.createRange(); 

        range.setStart(element, 1) 

        rteInstance.formatter.editorManager.nodeSelection.setRange(document, range); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/108769/ze/RTE_ExecCmnd252233485 

 

Documentation: https://blazor.syncfusion.com/documentation/rich-text-editor/exec-command 

 

Please check the sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha