Telerik blogs
XamarinT2 Dark_1200x303

We are happy to announce that the Telerik RichTextEditor control became official with the first release of the 2021 year 🎉. And of course, there are more great news—we have added additional features to the control which we believed were necessary to transition the control to its official state. 😉

We know the power of having RichTextEditor control in your application. In cases if you want to add, edit format text or paragraphs, hyperlinks and more. So we have added an additional features to the control to extend its functionality.

Here is a list of the new functionalities that the component now supports:

  • Default Context Menu which can be customized.
  • Select-All functionality
  • Notifications when opening invalid URLs
  • Hyperlink Error-Handling API
  • Dark Mode support for iOS and Dark Theme support for Android

Context Menu and Select-All Option

The built-in context menu shows common operations such as copy and paste for sharing data between the apps or within the app. The context menu is triggered on tap and hold gesture (right-button click on UWP) over the editor content. On Android and iOS it is also displayed as soon as the user performs selection.

The default context menu shows the following options:

  • Cut—cuts the selected content and saves it in the system clipboard;
  • Copy—copies the selected content and saves it in the clipboard;
  • Paste—pastes the content from the clipboard into the editor;
  • Paste as Plain Text—pastes the content from the clipboard stripping any additional formatting;
  • Select All—selects all of the content in the editor;

What options are available in the context menu depends on the current content selection or caret position in the editor. Read our help article for detailed explanation about the Context Menu.

A video with the default Context Menu:

RichTextEditor for Xamarin context menu

Custom Context Menu 👏

You can easily modify the RichTextEditor default Context Menu and add or remove some of the provided options. Just need to set AutoGenerateContextMenu property of the RichTextEditor to False and manually define the ContextMenuItems. You can choose from the predefined ContextMenuItems or create a CustomContextMenuItem instance and define its Title and Command (the Command can be bound to any of the RadRichTextEditor's Commands or to a custom command).

Let's customize the default context menu and add Bold, Italic, Select All, Underline and Open Hyperlink options

Here is how the RichTextEditor is defined in XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <telerikRichTextEditor:RadRichTextEditorToolbar x:Name="richTextToolbar" RichTextEditor="{x:Reference richTextEditor}" />
    <telerikRichTextEditor:RadRichTextEditor x:Name="richTextEditor" Grid.Row="1" AutoGenerateContextMenu="False">
        <telerikRichTextEditor:RadRichTextEditor.ContextMenuItems>
            <telerikRichTextEditor:BoldContextMenuItem />
            <telerikRichTextEditor:ItalicContextMenuItem/>
            <telerikRichTextEditor:OpenHyperlinkContextMenuItem Title="Navigate" />
            <telerikRichTextEditor:SelectAllContextMenuItem/>
            <telerikRichTextEditor:CustomContextMenuItem Title="Underline"
                                                         Command="{Binding Source={x:Reference richTextEditor}, Path=ToggleUnderlineCommand}"/>
        </telerikRichTextEditor:RadRichTextEditor.ContextMenuItems>
    </telerikRichTextEditor:RadRichTextEditor>
</Grid>

and the RichTextEditor source:

var htmlSource = @"<h2>Telerik RichTextEditor is now official</h2>
<p><strong>Telerik RichTextEditor for Xamarin</strong> enables users to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface. It delivers a set of tools for creating, editing, and formatting of text, paragraphs, lists, hyperlinks and more, and outputs the modified content as standard HTML.</p>
<h3>Features</h3>
<ul>
    <li><a href='https://docs.telerik.com/devtools/xamarin/controls/richtexteditor/richtexteditor-toolbar' target='_blank'>RichTextEditor Toolbar</a></li>
    <li><a href='https://docs.telerik.com/devtools/xamarin/controls/richtexteditor/richtexteditor-custom-toolbar' target='_blank'>RichTextEditor Custom Toolbar</a></li>
    <li><a href='https://docs.telerik.com/devtools/xamarin/controls/richtexteditor/styling/richtexteditor-styling' target='_blank'>RichTextEditor Styling</a></li>
    <li><a href='https://docs.telerik.com/devtools/xamarin/controls/richtexteditor/styling/richtexteditor-toolbar-styling' target='_blank'>RichTextEditor Toolbar Styling</a></li>
</ul>
";
this.richTextEditor.Source = RichTextSource.FromString(htmlSource);

Let's check our custom Context Menu:

custom context menu richtexteditor xamarin


Notifications when opening invalid URLs

Using the control you can easily create and manage hyperlinks through the commands for these options or using the predefined toolbar item wired to them. Of course, what will happen if you try to open an invalid URL. Well we have a solution for you 😍—API for handling this scenario or a notification when opening invalid URLs.

If you try to open an invalid URL (for example, the URL is not absolute, the domain does not exist or is incomplete, etc.) a notification will be displayed by default which indicates there is an error with the URL.

For example we have the following HTML content with an invalid link we want to open using the RichTextEditor:

var htmlSource = @"
<ul>
    <li><a href='docs.telerik.com/devtools/xamarin/controls/richtexteditor/richtexteditor-toolbar' target='_blank'>RichTextEditor Toolbar</a></li>
</ul>
";
this.richTextEditor.Source = RichTextSource.FromString(htmlSource);

And here is the result if we try to open this URL:

RichTextEditor for Xamarin error handling invalid URL

We are notified with an error message that the URL cannot be opened.

Of course, if you want to customize this message there is an option you can use—the Hyperlink Error-Handling API.

Hyperlink Error-Handling API

You can override the default behavior (default error message when trying to open an invalid URL) by handling the RichTextEditor's OpenHyperlinkError event:

Quick demonstration:

<telerikRichTextEditor:RadRichTextEditor x:Name="richTextEditor" Grid.Row="1" OpenHyperlinkError="richTextEditor_OpenHyperlinkError" />

And the event handler which shows a custom message:

private void RichTextEditor_OpenHyperlinkError(object sender, OpenHyperlinkErrorEventArgs e)
{
    e.Handled = true;
    Application.Current.MainPage.DisplayAlert(string.Format("Error opening {0}", e.Url), e.Error.Message, "Ok");
}

Here is the displayed error message

custom error message invalid url

Dark Mode Support for Android and iOS

Dark Mode support for all Telerik UI for Xamarin controls on iOS and on Android is available from the R1 2021 release.

dark mode xamarin forms

Let Us Know What You Think, Share Your Ideas and Feedback

As always, your feedback is incredibly valuable for us. With this in mind, we would love to hear from you on what you would like to see available in the offering or what we can do to improve your everyday experience in the dynamic world of the cross-platform application development. You can write in the Telerik UI for Xamarin Feedback portal or simply raise a ticket.

If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trial, offering all the functionalities and controls at your disposal at zero cost.


Dobrinka Yordanova
About the Author

Dobrinka Yordanova

Dobrinka Yordanova is a Technical Support Engineer, part of the Progress Telerik UI for Xamarin & UWP team in Sofia, Bulgaria. She holds a master's degree in Computer Systems and Technologies. Her passion is traveling around the world and exploring multicultural environments. In her spare time she likes making sushi, playing console games and hanging out with friends.

Related Posts

Comments

Comments are disabled in preview mode.