Skip to content

insert-text-in-current-position.md

Latest commit

 

History

History
83 lines (61 loc) · 4.19 KB

insert-text-in-current-position.md

File metadata and controls

83 lines (61 loc) · 4.19 KB
Raw
layout post
title Insert text and rich-text in Blazor DOCX Editor | Syncfusion
description Learn how to insert text, a paragraph, and rich-text content in the Blazor Document Editor component and much more.
platform document-processing
control Document Editor
documentation ug

Insert text and rich-text content in Blazor Document Editor

The Blazor 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.

N> 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);
    }
}

N> 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.