New to Telerik UI for Blazor? Download free 30-day trial

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 HtmlFormaProvider 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);
    }
}
In this article
Not finding the help you need? Improve this article