Telerik RichTextEditor for .NET MAUI: Display all HTML text

Learn how Telerik RichTextEditor for .NET MAUI components enables users to create rich text content with WYSIWYG. It comes with a variety of editing features and a built-in toolbar allows you to provide users with a quick and easy way to edit HTML content.

End-user applications often require the display and editing of rich text. Whether you’re targeting Windows, macOS, iOS, or Android, need to send email and format content, or focus on editing and viewing documents, Telerik RichTextEditor gets the job done. This What-You-See-Is-What-You-Get (WYSIWYG) interface component, available with R2 2023 (version 5.2.0) of Progress Telerik UI for .NET MAUI, comes with:

• Visualized HTML content (paragraphs, rich text, images, tables, ordered and unordered lists, etc.)
• Text format as follows: brave, italic, underscore and strikethrough
• Font manipulation such as size, series, text color, and text background color
• Bulleted and numbered lists
• select text
• Create and manage hyperlinks
• Subscript and Superscript Format
• Indentation and content alignment
• Undo/Redo edit operations
• Various HTML source options
• command support
• Image insertion and editing functions (resize, cut, copy, paste, remove, etc.)
• Built-in toolbar
• Flexible styling API

Add Telerik RichTextEditor to your .NET MAUI application

Like other UI components in Telerik UI for .NET MAUI family, adding Telerik RichTextEditor is simple and can be done in three steps:

1. Download and install Telerik UI for .NET MAUI.
2. call UseTelerik() This method is inside the Maui Program.cs file of a .NET MAUI project. This is required for all Telerik UI for .NET MAUI components. UseTelerik() Registers all handlers built-in or additionally created for Telerik components.
3. Define a Telerik RichTextEditor in XAML or C#.

XAML

<Grid>  
  <telerik:RadRichTextEditor  x:Name="richTextEditor"  AutomationId="richTextEditor"/>  
</Grid>

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Seed#

RadRichTextEditor  richTextEditor = new RadRichTextEditor();

Load rich text in Telerik RichTextEditor

Telerik RichTextBox displays HTML content by providing a Rich API that retrieves HTML from a string or document. What to do after that Source property.

Set the source directly as a string:

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

Use the RichTextSource.FromString method to extract HTML from a string.

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);

Reading a stream using the RichTextSource.FromStream method (Very useful option when you need to load a document):

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

For the purposes of this post, I used the third approach to load a document containing images, links, tables, and many other complex HTML features, as shown below.

Edit rich text with Telerik RichTextEditor📝

We’ve already loaded the entire rich document. But what do you do in the editor if you don’t want to edit?

Telerik Editor provides a wealth of features to do this, all of which are exposed to user commands that can be bound to different UIs depending on the requirements of the application.

Here’s a table with all the commands:

However, one of the most common scenarios is editing a document using the component’s toolbar, so this functionality is built in.

When you first visualize the Telerik Editor, you will see a toolbar containing buttons containing all of the above commands.

Hide toolbar

By default, toolbars appear ready to use with an adaptive look and feel. If you still want to hide or customize it, the first step is AutoGenerateItems property False.

Add toolbar

With the default toolbar hidden, you now need to create a new toolbar. The important part here is that you need to create an instance. RadRichTextEditorToolbar Component external to Telerik Editor, but use of the toolbar RichTextEditor The property to associate with the Editor component.

<telerik:RadRichTextEditorToolbar  RichTextEditor="{x:Reference richTextEditor}" >  
  ...
</telerik: RadRichTextEditorToolbar  >
  
<telerik:RadRichTextEditor  x:Name="richTextEditor"  />

Add toolbar items

You can then define which features you want to display. There are two ways to do this: You can use generic RadToolBarItems or predefined RichTextEditor toolbar items with functions assigned to them. The code below shows the pre-built editor toolbar items.

<telerik:RadRichTextEditorToolbar x:Name="richTextToolbar"  
    Grid.Row="{OnIdiom Desktop=0, Phone=1}"  
    ZIndex="10"  
    RichTextEditor="{x:Reference richTextEditor}"  
    AutoGenerateItems="False">  
<telerik:RichTextEditorFontFamilyToolbarItem/>
<telerik:RichTextEditorFontSizeToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorBoldToolbarItem/>
<telerik:RichTextEditorItalicToolbarItem/>
<telerik:RichTextEditorUnderlineToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorAlignLeftToolbarItem/>
<telerik:RichTextEditorAlignCenterToolbarItem/>
<telerik:RichTextEditorAlignRightToolbarItem/>
<telerik:RichTextEditorAlignJustifyToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorTextColorToolbarItem/>
<telerik:RichTextEditorHighlightTextColorToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorAddOrEditHyperlinkToolbarItem />
<telerik:RichTextEditorRemoveHyperlinkToolbarItem />
<telerik:RichTextEditorAddOrEditImageToolbarItem />
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorBulletingToolbarItem />
<telerik:RichTextEditorNumberingToolbarItem />
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorOutdentToolbarItem/>
<telerik:RichTextEditorIndentToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorTextFormattingToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorClearFormattingToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorStrikethroughToolbarItem/>
<telerik:RichTextEditorSuperscriptToolbarItem/>
<telerik:RichTextEditorSubscriptToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorUndoToolbarItem/>
<telerik:RichTextEditorRedoToolbarItem/>
<telerik:RichTextEditorHyperlinkNavigationToolbarItem />
<telerik:RichTextEditorImageNavigationToolbarItem />

</telerik:RadRichTextEditorToolbar>
  
<telerik:RadRichTextEditor x:Name="richTextEditor"  />

Style toolbar items

Now let’s style it a little differently. Because RichTextEditor’s toolbar is based on the RadToolbar control, all toolbar items in RichTextEditor inherit the RadToolbar control. Button Toolbar Items. All style properties available for ButtonToolbarItem are also applicable to toolbar items in the Editor.

For example, to change the background of the item defined above, you could define the following style:

<Style  TargetType="telerik:ButtonToolbarItemView"  x:Key="commonStyle">  
  <Setter  Property="MinimumWidthRequest"  Value="40"/>  
  <Setter  Property="BackgroundColor"  Value="#804BDE74"/>  
</Style>

And set it like this:

<telerik:RichTextEditorFontFamilyToolbarItem Style="{StaticResource commonStyle}"/>

To read more about Telerik ToolBar for .NET MAUI and see what other features this tool can offer, read our blog about ToolBar.

Select text, move caret or make it read-only 🙌

Telerik RichTextEditor also provides .NET MAUI developers with an API to manipulate its controls.

• GetSelectionAsync Method – Return asynchronously RichTextSelection An object that defines the current text selection within the editor (returns null (if no text is selected). that much RichTextSelection Objects include: Text not only itself Start and End The position of the text character.
• GetHtmlAsync Methods in RichTextEditor – Allows you to get generated and updated content within the editor HTML.
• IsReadOnly Properties – Control read-only status.

Style RichTextEditor👔

As we have already seen, Telerik ToolBar is customizable, and this also applies to the RichTextEditor itself. You can utilize the following style properties: BorderColor, BorderThickness, CornerThickness and BackgroundColor.

For example, let’s apply it to the example above:

<telerik:RadRichTextEditor  x:Name="richTextEditor"  
    BorderThickness="2"  
    BorderColor="#808660C5"  
    CornerRadius="5"  />

Handle advanced scenarios with events 👓

RadRichTextEditor is prepared to give .NET MAUI developers the flexibility to achieve more complex scenarios by handling events.

The RichTextEditor component exposes the following events:

• OpenHyperlinkError – Occurs when the user attempts to open an invalid URL in the editor.
• IsReadOnlyChanged – Occurs when RichTextEditor’s read-only mode is toggled.
• FontFamilyChanged – Occurs in the following cases: FontFamily The properties of RichTextEditor have been modified.
• FontSizeChanged – Occurs in the following cases: FontSize The properties of RichTextEditor have been modified.
• FontAttributesChanged – Occurs in the following cases: FontAttributesBold, italics, subscripts, superscripts, etc. are modified.
• TextDecorationsChanged – Occurs in the following cases: TextDecorationsUnderlines, strikethroughs, etc. have been modified.
• TextFormattingChanged – Occurs in the following cases: TextFormattingTitles, paragraphs, quotes, etc. have been modified.
• HorizontalTextAlignmentChanged – Occurs in the following cases: HorizontalTextAlignmentLeft, right, center or justification will be modified.
• ListTypeChanged – Occurs in the following cases: ListTypeNumbered lists, bulleted lists, etc. are modified.
• TextColorChanged – Occurs in the following cases: TextColor RichTextEditor’s properties have been updated.
• HighlightTextColorChanged – Occurs in the following cases: HighlightTextColor RichTextEditor’s properties have been updated.
• SelectionRangeChanged – Occurs in the following cases: SelectionRangeThe , which defines the start and end positions of the currently selected item within the editor text, are updated.
• IsHyperlinkSelectedChanged – Occurs when a hyperlink inside the editor is selected

Migrating from Telerik UI for Xamarin

Telerik RichTextEditor for .NET MAUI shares the same API as Telerik RichTextEditor for Xamarin.Forms, so there are no major changes here. There are still two things to keep in mind:

• ToolbarItems now receive the RichTextEditor prefix to avoid conflicts with the new RadToolBar for .NET MAUI components.
• The control’s namespace has changed from Telerik.XamarinForms.RichTextEditor to Telerik.Maui.Controls.

For more information, see the Xamarin to Telerik migration article.

Additional Resources

Complete examples demonstrating the capabilities of Telerik UI for .NET MAUI RichTextEditor can be found in the Telerik SDK and Telerik Controls samples.

More information about using the API and components can be found in the Telerik documentation.

Try it yourself

Telerik RichTextEditor is one of more than 60 powerful, feature-rich components of the Telerik UI for .NET MAUI family built to help you develop exceptional cross-platform applications. Try it for free now. If you need anything, don’t hesitate to share your feedback and ideas with the Telerik team on the Telerik Feedback Portal or Telerik Forums.

Try Telerik UI for .NET MAUI.