Introducing Xamarin.Forms Rich Text Editor

Well-formatted content conveys important information better than unformatted content. Nowadays, it’s hard to find rich text in mobile applications since most editors don’t support it. We at Syncfusion understand the need for this simple but essential function; that’s why we are happy to introduce the Xamarin.Forms Rich Text Editor component in Essential Studio 2019 Vol. 3.

This WYSIWYG editor provides a simple, yet powerful editing interface to compose richly formatted text with common formatting options such as bold, italic, and so on. The Rich Text Editor is widely used to create messaging applications, email composers, blogs, forum posts, feedback and review sections, note sections, and more. It has a variety of tools to edit and format rich text, and it returns valid HTML markup.

This blog post showcases some key features of the Rich Text Editor.

Seamless Formatting

The Rich Text Editor provides formatting options frequently used in mobile applications. Formatting can be applied to selected content, a whole paragraph, specific words, or a selected character. Available options include:

• Bolding, italicizing, and underlining.
• Custom font and background colors.
• Formatting for headings, quotations, code, paragraphs, etc.
• Increasing or decreasing paragraph indentation.
• Text alignment.

Sequencing content as a list

Organize content by applying ordered (numbered) or unordered (bulleted) lists.

Clipboard

Cut, copy, and paste formatted content within the same application or to an external application.

Toolbar customization

The Rich Text Editor provides a highly customizable toolbar. Customization options include:

• Changing the toolbar’s background color, text color, as well as the background color of toolbar items.
• Showing or hiding the entire built-in toolbar or a specific toolbar item.

You can also design your own toolbar that has the same functionalities using our comprehensive APIs.

Creating a Xamarin.Forms application containing the Rich Text Editor

This section explains, step-by-step, the procedure for implementing the Rich Text Editor control in a Xamarin.Forms application using Visual Studio.

1. Create a blank Xamarin.Forms application.
2. In the application, refer to the Xamarin.SfRichTextEditor NuGet package from nuget.org. To learn more about SfRichTextEditor, refer to “Adding SfRichTextEditor reference” in Syncfusion’s documentation.
3. When deploying the application in UWP and iOS, please follow the steps provided in “Launching the application on each platform with Rich Text Editor” in Syncfusion’s documentation.
4. Import the rich text editor namespace in your respective page and initialize SfRichTextEditor as demonstrated in the following code sample.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="GettingStarted.MainPage" 
             xmlns:richtexteditor ="clr-namespace:Syncfusion.XForms.RichTextEditor;assembly=Syncfusion.SfRichTextEditor.XForms">
    <StackLayout>
        <richtexteditor:SfRichTextEditor HeightRequest="150" Text= "The Rich Text Editor is a WYSIWYG editor that provides the best user experience for creating and updating content." />
    </StackLayout>
</ContentPage>

That’s how you add the Rich Text Editor control to an application.

You can download a basic sample from the “Getting Started” section of our Rich Text Editor control documentation.

Conclusion

I hope you have a clear picture of how the new Rich Text Editor control works, and how to use it in a Xamarin.Forms application. Give it a try in our 2019 Volume 3 release.

We also invite you to check out all our Xamarin.Forms controls. You can always download our free evaluation to see all our controls in action or explore our samples on Google Play and the Microsoft Store. To learn more about the advanced features of our Xamarin.Forms controls, refer to our documentation.

If you have any questions or require clarification regarding this control, please let us know in the comments section of this blog post. You can always contact us through our support forum, Direct-Trac support system, or feedback portal. We are always happy to assist.