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:
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.
RadRichTextEditorrelies 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
RadRichTextEditorinside a ScrollView control is not supported.RadRichTextEditorprovides its own scrolling mechanism.When the
RadRichTextEditoris placed inside aStackLayout, you need to set explicitly itsWidthRequestandHeightRequestproperties, otherwise the control will not render. This is becauseStackLayoutusually 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:
<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:
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:
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:
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.