Convert Editor Value to Plain Text

Environment

Product

Editor for Blazor

Description

How to convert the HTML string value of the Editor and retrieve it as plain text?

Solution

The HTML value of the Editor can be converted to plain text and other formats with our Document Processing library.

Here are the required steps:

1. Add the Telerik.Documents.Core and Telerik.Documents.Flow NuGet packages to your project.
2. Import the required namespaces:
   • Telerik.Windows.Documents.Flow.FormatProviders.Html
   • Telerik.Windows.Documents.Flow.FormatProviders.Txt
   • Telerik.Windows.Documents.Flow.Model
3. Create an HtmlFormatProvider instance.
4. Use the HTML provider's Import method to create a RadFlowDocument from the Editor's HTML value.
5. Create a TxtFormatProvider instance.
6. Use the TXT provider's Export method to export the RadFlowDocument as plain text.

To export to another format, use the corresponding namespace and format provider, instead of Txt.

Obtain the Editor HTML value as plain text

@*TxtFormatProvider*@
@using Telerik.Windows.Documents.Flow.FormatProviders.Txt;
@*HtmlFormatProvider*@
@using Telerik.Windows.Documents.Flow.FormatProviders.Html;
@*RadFlowDocument*@
@using Telerik.Windows.Documents.Flow.Model;

<TelerikEditor @bind-Value="@HtmlValue" />

<p><TelerikButton OnClick="@ConvertValue">Convert to Plain Text</TelerikButton></p>

<TelerikTextArea @bind-Value="@PlainTxtValue" Width="100%" AutoSize="true" />

@code {

    private string HtmlValue { get; set; } =
        @"
            <h1>Title</h1>
            <p>Paragraph paragraph paragraph.</p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
        ";
    private string PlainTxtValue { get; set; }

    private void ConvertValue(MouseEventArgs e)
    {
        HtmlFormatProvider htmlProvider = new HtmlFormatProvider();
        RadFlowDocument document = htmlProvider.Import(HtmlValue);
        TxtFormatProvider txtProvider = new TxtFormatProvider();
        PlainTxtValue = txtProvider.Export(document);
    }
}

See Also

• Configuring Document Processing Libraries