Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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.

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

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

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

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

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

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

Razor
<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:

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

Razor
<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}");
        }
}