Getting Started with the .NET MAUI RichTextEditor

This article will guide you through the steps needed to add a basic RichTextEditor control in your application.

This guide provides the information you need to start using the Telerik UI for .NET MAUI RichTextEditor by adding the control to your project.

At the end, you will achieve the following result.

Prerequisites

Before adding the RichTextEditor, you need to:

1. Set up your .NET MAUI application.

2. Download Telerik UI for .NET MAUI.

3. Install Telerik UI for .NET MAUI.

Define the Control

When your .NET MAUI application is set up, you are ready to add a RichTextEditor control to your page. The following example shows a sample RichTextEditor definition.

RadRichTextEditor relies on WebView for the rendering of HTML content. Some of the limitations for placing WebView on the page which are also valid for RichTextEditor:

• Nesting RadRichTextEditor inside a ScrollView control is not supported. RadRichTextEditor provides its own scrolling mechanism.

• When the RadRichTextEditor is placed inside a StackLayout, you need to set explicitly its WidthRequest and HeightRequest properties, otherwise the control will not render. This is because StackLayout usually wants to size itself according to its children, but a WebView (since it does scrolling) wants to size itself to its parent. You can learn more about this in the .NET MAUI WebView documentation.

You have to either use a Grid as a parent container or explicitly define the size of the RichTextEditor control.

1. Set up the RichTextEditor instance:

xaml

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

In addition to this, you need to add the following namespace:

2. Add the telerik namespaces:

XAML

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

Loading HTML Content

With RichTextEditor, users can create and edit HTML content. In some cases, you may need to load formatted text in advance—you can achieve this through the Source property of the control:

c#

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

Register the Telerik controls through the Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the CreateMauiApp method of the MauiProgram.cs file of your project:

C#

using Telerik.Maui.Controls.Compatibility;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseTelerik()
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
			});

		return builder.Build();
	}
}           

For a runnable example with the RichTextEditor Getting Started scenario, see the SDKBrowser Demo Application and go to RichTextEditor > Getting Started category.

Additional Resources

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

See Also

• .NET MAUI RichTextEditor Product Page
• .NET MAUI RichTextEditor Forum Page
• Telerik .NET MAUI Blogs
• Telerik .NET MAUI Roadmap