Syncfusion AI Assistant

How can I help you?

Insert Text and Rich-Text Content in Blazor DocumentEditor

3 Oct 20253 minutes to read

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

Insert text in 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 the text in 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 current selection
    public async void InsertText()
    {
        await container.DocumentEditor.Editor.InsertTextAsync("Syncfusion");
    }
}

Insert paragraph in current cursor position

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

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

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

Insert the rich-text content

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.

NOTE

HTML string should be well formatted HTML. DocIO support only well formatted XHTML.

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

  • Refer to the following example for Converting the HTML content to SFDT and then insert it in current position using Pasts 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 HTML file/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 in cursor position using paste API
        await container.DocumentEditor.Editor.PasteAsync(sfdtString);
    }
}

NOTE

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.