Using RichTextEditor in Your .NET MAUI Apps

See how to get started with the Telerik UI for .NET MAUI rich text editor component, including styling options.

No matter your age, there will always be moments when you need to take extensive notes, whether it’s to better remember an idea, to not miss any important details or especially when you’re fully focused on an educational course and don’t want to miss a single update.

In today’s digital era, technology has become our greatest lifesaver: We have countless applications available to support us in every aspect of our lives … and if one doesn’t exist, we have the ability to create it!

Let’s go with a more direct example: Imagine you’re finally taking that course you’ve been waiting for, and you have a super powerful educational app where, besides learning, you can also take your own notes. It would be amazing if you weren’t limited to small text fields that restrict how much you can write, right? Otherwise, your ideas might not be captured the way you intended.

This is where the .NET MAUI RichTextEditor control from Progress Telerik comes into play—a component that allows you to work with long text comfortably and efficiently. Today, I want to show you how to make the most of it, integrating it quickly and easily into your .NET MAUI applications. Come and discover everything you can achieve with it!

What Is the RichTextEditor?

The RichTextEditor is a Telerik component that allows you to take extensive text notes, offering a wide range of editing capabilities. You can create, edit, format text, add hyperlinks and even generate the modified content as standard HTML. In short, it’s a powerful text editor that you can integrate right into your app.

Some of its key features include:

• Toolbar: The control comes with an integrated toolbar that lets you easily manipulate text, from changing colors and font sizes to applying styles like bold or italic. This built-in feature saves you the hassle of implementing such functionality manually, as you might need to do with other options.
• Styling API: You can further customize the appearance by modifying various style properties, such as background color, border color and border thickness. For more details, check out the Editor styling and Toolbar styling documentation.
• Customizable Context Menu: The RichTextEditor also includes an integrated context menu. This means you can highlight a word or phrase within your text and, with a right-click, open a menu to apply quick actions like copy or paste. Even better, you can customize this menu by adding or removing options according to your app’s specific needs.
• Localization: One of my favorite features! The RichTextEditor also supports text translation into any language, so that your app’s content can be understood by people around the world—without language limitations! This is fantastic news, especially considering that translating app content is usually a time-consuming and tedious task. With this feature, you get translation capabilities fully integrated and ready to use.

Now let’s see how this component looks visually with its functionalities:

How Can I Implement It? 🤔

After seeing all the amazing things we can achieve, it’s time to learn how to implement it!

You can set it up in just a few simple steps using the free trial for Telerik UI. First, make sure you have the following prerequisites ready:

• Set up your .NET MAUI application.
• Download Telerik UI for .NET MAUI.
• Install Telerik UI for .NET MAUI.

Once you’ve got everything in place, we’re ready to go!

Step 1: Add the Telerik Namespace

Go to your XAML file, and add the following namespace:

xmlns:telerik="[http://schemas.telerik.com/2022/xaml/maui](http://schemas.telerik.com/2022/xaml/maui)"

Step 2: Set Up the RichTextEditor Instance

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

Step 3: Register Telerik in MauiProgram.cs

Go to your MauiProgram.cs file, and inside the CreateMauiApp method, make sure to register Telerik by adding the .UseTelerik() extension method. It’s recommended to place it above the .UseMauiApp<App>() line, like this:

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

And with these simple steps, you have integrated a sleek text editor into your .NET MAUI application! 💪

Let’s Explore Some Additional Things 👀

Loading HTML from a String

In case you need to read HTML text, you can also do so using the source property, as I will show you below.

var htmlSource = @"<h4>The Beauty and Diversity of Flowers</h4> 
  
<p><strong>Flowers</strong> are one of nature's most beautiful creations, found in a wide range of colors, shapes, and sizes.</p>
    
<p style='color:#808080'>They play a vital role in plant reproduction and attract pollinators like bees and butterflies. Flowers also hold cultural, medicinal, and symbolic meanings across different societies.</p>";
    
this.richTextEditor.Source = RichTextSource.FromString(htmlSource);

Loading HTML from a Stream

Another way to load HTML content is by retrieving it from a stream using the FromStream method. The following example demonstrates how to load an HTML file 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);

How to Retrieve HTML Content?

It’s to simple to retrieve HTML content. You just have to use the GetHtmlAsync() method, as I show you below:

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

Conclusion

Did you see how, in just a few minutes, you were able to apply a control that looks super complex but is actually very simple to implement? 🎯

This is exactly the kind of balance we aim for in development: finding components that not only offer more functionality to our users but also save us valuable development time—time we can invest in other important tasks!

I encourage you to start implementing the RichTextEditor in your applications, even in practice projects—you’ll see how cool and easy it is to work with! Telerik UI for .NET MAUI comes with a 30-day free trial, so give it a go!

Try UI for .NET MAUI

If you have any questions, feel free to leave them in the comments.

See you next time! 🙋‍♀️

References

• https://www.telerik.com/maui-ui/richtexteditor
• https://docs.telerik.com/devtools/maui/controls/richtexteditor/overview