Skip to main content

Text Operations in Blazor Rich Text Editor

  • 7 minutes to read

This section contains examples that demonstrate how to insert, get, format, and delete text in the Rich Text Editor.

Insert Text

Call a sub-document’s AddTextAsync method overload to insert text into an open document.

Insert Text into the Active Sub-Document

Use the @bind-Selection attribute to bind the Selection property to a data field and access the editor’s selection. The selection’s ActiveSubDocument and CaretPosition properties allow you to access the active sub-document and get the caret position.

<DxRichEdit @bind-Selection="@selection" @ref="@richEdit" />

@code {
    DxRichEdit richEdit;
    Selection selection;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
        @* ... *@
            // Inserts text at the caret position
            await selection.ActiveSubDocument.AddTextAsync(selection.CaretPosition, "Inserted Text");
            // Inserts text at the beginning of the active sub-document
            await selection.ActiveSubDocument.AddTextAsync(0, "Inserted Text");
            // Appends text to the active sub-document
            await selection.ActiveSubDocument.AddTextAsync("Inserted Text");
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Insert Text into the Main Sub-Document

Use the DocumentAPI property to access the main sub-document. Call its AddTextAsync method overload to insert text.

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            // Inserts text at the beginning of the main sub-document
            await documentAPI.AddTextAsync(0, "New Text");
            // Appends text to the main sub-document
            await documentAPI.AddTextAsync("New Text");
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
        @* ... *@
}

Use the Sections property to access sections. Call the GetHeaderAsync or GetFooterAsync method to access a section’s header or footer. Call its AddTextAsync method overload to insert text.

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            // Accesses the first section
            Section FirstSection = await documentAPI.Sections.GetAsync(0);

            // Creates the section's header if it does not exist and accesses the header
            var Header = await FirstSection.GetHeaderAsync(HeaderFooterType.Primary, true);
            // Inserts text at the beginning of the header
            await Header.AddTextAsync(0, "The beginning of the header.");
            // Appends text to the header
            await Header.AddTextAsync("The end of the header.");

            // Creates the section's footer if it does not exist and accesses the footer
            var Footer = await FirstSection.GetFooterAsync(HeaderFooterType.Primary, true);
            // Inserts text at the beginning of the footer
            await Footer.AddTextAsync(0, "The beginning of the footer.");
            // Appends text to the footer
            await Footer.AddTextAsync("The end of the footer.");
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Insert Text into a Paragraph

Use a sub-document’s Paragraphs property to access a particular paragraph. A paragraph’s Interval property allows you to obtain the interval that contains this paragraph. Use the interval Start and Length properties to calculate the insert position.

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            // Accesses the first paragraph
            Paragraph FirstParagraph = await documentAPI.Paragraphs.GetAsync(0);
            // Appends text to the paragraph
            int Position = FirstParagraph.Interval.Start + FirstParagraph.Interval.Length - 1;
            await documentAPI.AddTextAsync(Position, "The end of the paragraph");
            // Inserts text at the beginning of the paragraph
            await documentAPI.AddTextAsync(FirstParagraph.Interval.Start, "The beginning of the paragraph");
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Get Text

Call a sub-document’s GetTextSpanAsync method overload to get the sub-document’s text span. Use the span’s Text property to convert and get the span content as plain text.

Get the Entire Text of the Main Sub-Document

The DocumentAPI property allows you to access the main sub-document. The following code snippet calls the GetTextSpanAsync(Int32, Int32, CancellationToken) method to get the sub-document’s text span.

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            // Gets the main sub-document's length that corresponds to the position of the last character in the last paragraph.
            IReadOnlyList <Paragraph> allParagraphs = await documentAPI.Paragraphs.GetAllAsync();
            Paragraph lastParagraph = allParagraphs.Last();
            int mainSubDocumentLength = lastParagraph.Interval.Start + lastParagraph.Interval.Length;
            // Gets the main sub-document's text
            TextSpan textSpan = await documentAPI.GetTextSpanAsync(0, mainSubDocumentLength);
            string mainSubDocumentText = textSpan.Text;
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Get the Selected Text

Use the @bind-Selection attribute to bind the Selection property to a data field and access the editor’s selection. Its ActiveSubDocument and Intervals properties allow you to access the active sub-document and the intervals that contain the selection.

<DxRichEdit @bind-Selection="@selection" @ref="@richEdit" />

@code {
    DxRichEdit richEdit;
    Selection selection;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
        @* ... *@
            // Gets a textual representation of the first selected interval
            SubDocument activeSubDocument = selection.ActiveSubDocument;
            TextSpan firstSelectedTextSpan = await activeSubDocument.GetTextSpanAsync(selection.Intervals.First());
            string selectedText = firstSelectedTextSpan.Text;
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Format Text

Use a sub-document’s AddTextAsync or GetTextSpanAsync method overload to get a text span and call its ChangePropertiesAsync method to customize character properties.

The following code snippet configures character properties of inserted text.

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            TextSpan characters = await documentAPI.AddTextAsync("New Text");
            @* ... *@
            await characters.ChangePropertiesAsync(properties => {
                    properties.FontName = "Arial";
                    properties.FontSize = 16;
                    properties.Underline = true;
            });
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}

Clear Formatting

The ChangeDefaultCharacterPropertiesAsync method allows you to change the document’s default character formatting. To reset character formatting in a sub-document or its interval to the default settings, call the sub-document’s ClearFormattingAsync method overload.

The following code snippet configures the default character formatting and applies it to a document once the document is loaded in the Rich Text Editor:

<DxRichEdit DocumentLoaded=OnDocumentLoaded/>

@code {
    async Task OnDocumentLoaded(Document document) {
        await document.ChangeDefaultCharacterPropertiesAsync(properties => {
            properties.FontName = "Times New Roman";
            properties.FontSize = 12;
        });
        await document.ClearFormattingAsync();
    }
}

Delete Text

Pass an interval to a sub-document’s RemoveAsync method overload to delete the interval’s content.

<DxRichEdit @ref="richEdit" />

@code {
    DxRichEdit richEdit;
    Document documentAPI;
    @* ... *@
    /* Surround the code that contains an asynchronous operation with a try-catch block to handle
    the OperationCanceledException. This exception is thrown when an asynchronous operation is canceled. */
        try {
            documentAPI = richEdit.DocumentAPI;
            @* ... *@
            Paragraph firstParagraph = await documentAPI.Paragraphs.GetAsync(0);
            @* ... *@
            // Removes the first paragraph
            await documentAPI.RemoveAsync(firstParagraph.Interval);
            // Removes content located on the 5-15 positions of the main sub-document
            await documentAPI.RemoveAsync(5, 10);
            @* ... *@
        }
        catch (OperationCanceledException e) {
            Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
        }
}