How to Insert Content at Cursor in Blazor DOCX Editor

28 Aug 20263 minutes to read

The Blazor DOCX Editor (Document Editor) component supports inserting text, paragraphs, and rich-text content.

Insert text at the current cursor position

Use the InsertTextAsync API in the Editor module to insert text at the current cursor position.

The following example code illustrates how to add text in the current selection.

// It will insert the provided text in current selection
await container.DocumentEditor.Editor.InsertTextAsync("Syncfusion");

<button @onclick="InsertText">Insert Text</button>
<SfDocumentEditorContainer @ref="container" EnableToolbar="true"  Height="590px" >
</SfDocumentEditorContainer>
@code {
    SfDocumentEditorContainer container;

    // It will insert the provided text in the current selection
    public async void InsertText()
    {
        await container.DocumentEditor.Editor.InsertTextAsync("Syncfusion");
    }
}

Insert a paragraph at the current cursor position

To insert a new paragraph at the current cursor position, use the InsertTextAsync API with \r\n or \n as the parameter.

The following example code illustrates how to add a new paragraph in the current selection.

// It will add a new paragraph in the current selection
await container.DocumentEditor.Editor.InsertTextAsync("\n");

Insert rich-text content at the current cursor position

To insert HTML content, convert the HTML to SFDT format and then use the PasteAsync API to insert the SFDT at the current cursor position.

HTML string should be well-formatted HTML. DocIO supports only well-formatted XHTML.

The following example illustrates how to insert HTML content at the current cursor position.

Refer to the following example for converting HTML content to SFDT and inserting it at the current position using the PasteAsync API.

@using Syncfusion.Blazor.DocumentEditor
@using System.Text.Json

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        string htmltags = "<?xml version='1.0' encoding='utf-8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns ='http://www.w3.org/1999/xhtml' xml:lang='en' lang ='en'><body><h1>The img element</h1><img src='https://www.w3schools.com/images/lamp.jpg' alt ='Lamp Image' width='500' height='600'/></body></html>";
        // You can also load an HTML file or string.
        Syncfusion.Blazor.DocumentEditor.WordDocument document = Syncfusion.Blazor.DocumentEditor.WordDocument.LoadString(htmltags, ImportFormatType.Html); // Convert the HTML to SFDT format.
        string sfdtString = JsonSerializer.Serialize(document);
        document.Dispose();
        // Insert the SFDT content at the current cursor position using the PasteAsync API
        await container.DocumentEditor.Editor.PasteAsync(sfdtString);
    }
}

The above example illustrates inserting HTML content. Similarly, you can insert any rich-text content by converting any of the supported file formats (DOCX, DOC, WordML, HTML, RTF) to SFDT.