Configuration

By using the exposed configuration options of the .NET MAUI RichTextEditor, you can configure the component features, such as the HTML source, text formatting options, text selections, and the read-only mode.

HTML Source Options

To load HTML content from a string or a stream into the editor, use the Source property of type RichTextSource.

You can directly assign a string (containing HTML) as a Source of the editor and RadRichTextEditor will display the HTML content through the implicit converter implemented in RichTextSource.

this.richTextEditor.Source = "<b>Hello World!</b>";

Load HTML from a String

You can load the HTML content from a string by using the static FromString method of the RichTextSource class and assign the result to the Source property of RadRichTextEditor:

var htmlSource = @"<h4>One of the Most Beautiful Islands on Earth - Tenerife</h4>
                <p><strong>Tenerife</strong> is the largest and most populated island of the eight <a href='https://en.wikipedia.org/wiki/Canary_Islands' target='_blank'>Canary Islands</a>.</p>
                <p style='color:#808080'>It is also the most populated island of <strong>Spain</strong>, with a land area of <i>2,034.38 square kilometers</i> and <i>904,713</i> inhabitants, 43% of the total population of the <strong>Canary Islands</strong>.</p>";
this.richTextEditor.Source = RichTextSource.FromString(htmlSource);

Alternatively, you can create a RichTextHtmlStringSource object and assign it to the Source property of the RichTextEditor.

Load HTML from a Stream

Another option to preload HTML is by retrieving it from a stream through the static FromStream method of the RichTextSource and again, assign the result to the Source property of the RichTextEditor. In the example below, the HTML file is loaded as an EmbeddedResource.

Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
    Assembly assembly = typeof(GetHtml).Assembly;
    string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("richtexteditor-htmlsource.html"));
    Stream stream = assembly.GetManifestResourceStream(fileName);
    return stream;
});

this.richTextEditor.Source = RichTextSource.FromStream(streamFunc);

Alternatively, you can create a RichTextHtmlStreamSource object and set it as the Source of the RichTextEditor.

Retrieving HTML Content

Through GetHtmlAsync method of RichTextEditor, you can get the content created and updated inside the editor HTML:

var htmlString = await this.richTextEditor.GetHtmlAsync();

The next image shows the result from the sample code with GetHtmlAsync.

RichTextEditor Editing Capabilities

RichTextEditor helps the app users to create and edit HTML content. You can apply the editing features provided by RichTextEditor through the UI by using theRadRichTextEditorToolbar, or you can create your custom UI and manually execute the RadRichTextEditor Commands.

In addition, RichTextEditor provides a flexible API that allows you to apply formatting at the current caret position or on the selected text inside the editing area.

Formating Options	Descriptions
TextFormatting of type RichTextFormatting	Defines the text formatting, such as heading, paragraph or quotation of the text at the current position or selection
TextColor	Specifies the color of the text at the current position or selection
HighlightTextColor	Defines the text background color at the current position or selection
SelectionRange of type RichTextSelectionRange	Specifies the start and end position of the currently selected inside the editor text
FontSize	Sets the font size of the text at the current caret position or selection
FontAttributes of type RichTextFontAttributes	Defines the font attributes, such as bold, italic, subscript, and superscript at the current position or selection
TextDecorations of type RichTextDecorations	Specifies text decorations, such as underline and strikethrough at the current position or selection
HorizontalTextAlignment of type RichTextHorizontalAlignment	Specifies the text alignment, such as left, right, center, or justify at the current position or selection
ListType of type RichTextListType	Specifies the list type, such as numbered or bulleted list at the current position or selection

Text Selection

RichTextEditor has a text selection functionality—the end user can initiate a selection action through the tap and hold gesture over the text. The selected text is marked with a different background color and two drag handles are available to the user to make it easier to modify the current selection.

• GetSelectionAsync method—Asynchronously returns a RichTextSelection object which defines the current text selection inside the editor (returns null if no text is selected). The RichTextSelection object contains the Text itself as well as the Start and End position of the text characters.

Read-Only State

The IsReadOnly(bool) property of the RichTextEditor indicates whether the control is in a read-only mode. Setting IsReadOnly="True" means that the Toolbar Items will be disabled and the content of the document cannot be changed. By default, the editor is editable and the IsReadOnly value is False.

Read-Only Example

The next example shows how to triggers the IsReadOnly state by using a switch. The next snippet shows the XAML definition:

<Grid RowDefinitions="{OnIdiom Desktop='Auto, Auto, *', Phone='Auto, *, Auto'}">
    <HorizontalStackLayout Spacing="10" Margin="0, 0, 0, 10">
        <Label Text="ReadOnly State:" VerticalOptions="Center" />
        <Switch IsToggled="{Binding IsReadOnly, Source={x:Reference richTextEditor}}" VerticalOptions="Center" />
    </HorizontalStackLayout>
    <telerik:RadRichTextEditor x:Name="richTextEditor" 
                               BorderColor="#DFDFDF"
                               BorderThickness="1"
                               IsReadOnly="True"
                               Grid.Row="{OnIdiom Desktop=2, Phone=1}" />
    <telerik:RadRichTextEditorToolbar x:Name="richTextToolbar" 
                                      IsVisible="{Binding IsReadOnly, Source={x:Reference richTextEditor}, Converter={StaticResource InvertedBooleanConverter}}"
                                      RichTextEditor="{x:Reference richTextEditor}" 
                                      Grid.Row="{OnIdiom Desktop=1, Phone=2}" />
</Grid>

For the example, we use a converter to hide the Toolbar when the control is in read-only state:

<telerik:InvertedBooleanConverter x:Key="InvertedBooleanConverter" />

The next code sample shows how to define the source of the RichTextEditor:

Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
    Assembly assembly = typeof(ReadOnlyState).Assembly;
    string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("PickYourHoliday.html"));
    Stream stream = assembly.GetManifestResourceStream(fileName);
    return stream;
});

this.richTextEditor.Source = RichTextSource.FromStream(streamFunc);

The richtexteditor-htmlsource.html file is visualized in the Editor as an EmbeddedResource.

For a runnable example with the RichTextEditor read-only state, see the SDKBrowser Demo Application and go to RichTextEditor > Features.

See Also

• RadRichTextEditor Toolbar
• Commands
• Configure the RichTextEditor
• Events
• Working with images
• Hyperlinks