Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (27)Blazor  (49)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (53)JavaScript  (134)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (400)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (105)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (234)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (140)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (17)UI  (62)Uncategorized  (68)Unix  (2)User interface  (49)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (99)What's new  (62)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing Xamarin.Forms Rich Text Editor control

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.

    Text formatting in Xamarin Rich text editor
    Text formatting

Sequencing content as a list

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

Applying list in Xamarin Rich Text Editor
Applying list in Xamarin Rich Text Editor

Clipboard

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

Copying, pasting formatted content from other application (browser)
Copying, pasting formatted content from other application (browser)

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.

Toolbar customization Xamarin Rich Text Editor
Toolbar customization

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.Rich Text Editor Xamarin

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 forumDirect-Trac support system, or feedback portal. We are always happy to assist.

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (9)

Great work!

Can we save it as PDF?

Hi Ankush,

Yes, it is possible to save the formatted text in Rich Text Editor as Word/PDF document using Syncfusion.Xamarin.DocIORenderer NuGet. Please find the code example and sample for the mentioned requirement in below mentioned KB link.
KB link: https://www.syncfusion.com/kb/10825/how-to-export-a-rich-text-editor-text-to-word-and-pdf-document-in-xamarin-forms

Regards,
Dilli babu.

Can a word document be convereted to Rich Text document format as well?

Hi Amir,

We regret for the delay.

Xamarin RichTextEditor doesn’t have direct import support of Word document. Instead, you can use our Essential DocIO to export the Word document as HTML. Please refer the following documentation for exporting Word document to HTML file.
UG documentation : https://help.syncfusion.com/file-formats/docio/html?cs-save-lang=1&cs-lang=xamarin

Then, the HTML string need to set to the HtmlText property of SfRichTextEditor to view the content in Rich Text Control.
HtmlText API : https://help.syncfusion.com/cr/xamarin/Syncfusion.SfRichTextEditor.XForms~Syncfusion.XForms.RichTextEditor.SfRichTextEditor~HtmlText.html

Regards,
Dilli babu.

Hi there, I would like to subscribe for this web site to obtain most
recent updates, therefore where can i do it please assist.

Hi Jared,

Thank you for showing up interest in reading our blog posts.

You either subscribe to our mail update or subscribe our RSS feed to get updates of the new posts in our site. You can find both these options in the right pane of the blog post, above the Popular Now blog list.

Thanks,
Suresh

Can we create custom menus or buttons for other operation

Hi Vikas,

Thank you for contacting Syncfusion support.

Currently, SfRichTextEditor doesn’t provide support to add a custom menus or buttons to the toolbar. We have already logged a feature report in feedback portal. We will implement this feature in any of upcoming release. The status of this feature can be tracked using the following feedback portal link.
https://www.syncfusion.com/feedback/9135/customize-richtexteditor-toolbar

Regards,
Dilli babu.

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top