Advanced Features in .NET MAUI Rich Text Editor (SfRichTextEditor)

20 Jul 20269 minutes to read

This section covers the essential properties, methods, and events of the .NET MAUI SfRichTextEditor for handling content and user interactions.

Setting Plain Text

The Rich Text Editor control displays plain text, which can be set using the Text property.

xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

 <richTextEditor:SfRichTextEditor Text="The rich text editor component is a WYSIWYG (what you see is what you get) editor that provides the best user experience to create and update the content"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.Text = "The rich text editor component is a WYSIWYG (what you see is what you get) editor that provides the best user experience to create and update the content";

.NET MAUI Rich Text Editor with Text

Setting HTML Formatted Text

The HtmlText property of the SfRichTextEditor control is used to set HTML formatted text.

xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

 <richTextEditor:SfRichTextEditor HtmlText= "The &lt;b&gt; rich text editor &lt;/b&gt; component is a WYSIWYG (what you see is what you get) editor that provides the best user experience to create and update the content"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.HtmlText = "The <b>rich text editor</b> component is a WYSIWYG (what you see is what you get) editor that provides the best user experience to create and update the content";

.NET MAUI Rich Text Editor with HtmlText

Getting Selected HTML

To retrieve the HTML representation of the currently selected content, use the GetSelectedText method. This is an asynchronous method that returns a Task and must be awaited.

string selectedText = await richTextEditor.GetSelectedText();

Default Text Style

You can define the default appearance for any new text typed into the editor. These settings apply to text that does not have any other specific formatting applied.

  • DefaultFontFamily: Sets the default font family for the content. Default value is “Arial” (string).
  • DefaultFontSize: Sets the default font size. Default value is 12.0d (double).
  • DefaultTextColor: Sets the default color of the text. Default value is Colors.Black (Color).
xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

<richTextEditor:SfRichTextEditor DefaultFontFamily="Impact"
                      DefaultFontSize="14"
                      DefaultTextColor="DarkGreen"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.DefaultFontFamily = "Impact";
richTextEditor.DefaultFontSize = 14;
richTextEditor.DefaultTextColor = Colors.DarkGreen;

.NET MAUI Rich Text Editor with Default text style

Placeholder

The editor can display a placeholder text when the content is empty. This is useful for prompting the user to enter content or providing a hint about the expected input. The placeholder is cleared as soon as the user starts typing. Default value is “Type Here…”.

  • PlaceholderFontFamily : Sets the font family of the placeholder text. Default value is null (string).
  • PlaceholderFontSize: Sets the font size of the placeholder text. Default value is 12.0d (double).
  • PlaceholderColor: Sets the color of the placeholder text. Default value is Colors.Gray (Color).
xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

<richTextEditor:SfRichTextEditor Placeholder="Type your content here..."
                      PlaceholderFontFamily="Impact"
                      PlaceholderFontSize="24"
                      PlaceholderColor="Green"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.Placeholder = "Type your content here...";
richTextEditor.PlaceholderFontFamily = "Impact";
richTextEditor.PlaceholderFontSize = 24;
richTextEditor.PlaceholderColor = Colors.Green;

.NET MAUI Rich Text Editor with Placeholder

Programmatic Control

The SfRichTextEditor provides several methods to programmatically control its behavior, such as managing focus, history, and cursor position.

Move Cursor to Start

Moves the cursor to the very beginning of the content in the editor.

richTextEditor.MoveCursorToStart();

Move Cursor to End

Moves the cursor to the very end of the content in the editor.

richTextEditor.MoveCursorToEnd();

Increase Indent

Increases the indentation of the current paragraph or selected paragraphs.

richTextEditor.IncreaseIndent();

Decrease Indent

Decreases the indentation of the current paragraph or selected paragraphs.

richTextEditor.DecreaseIndent();

Set Focus

Programmatically sets the input focus to the rich text editor.

richTextEditor.Focus();

Remove Focus

Programmatically removes the input focus from the rich text editor.

richTextEditor.Unfocus();

Undo Last Action

Reverts the last action performed in the editor.

richTextEditor.Undo();

Redo Last Action

Restores the most recently undone action in the editor.

richTextEditor.Redo();

Events

The SfRichTextEditor provides a variety of events to notify the changes and user interactions within the control. You can subscribe to these events to execute custom logic in response to actions like text changes, format changes, focus shifts, hyperlink clicks, or image requests.

FormatChanged Event

The FormatChanged event occurs when the formatting status changes. This is useful for implementing contextual formatting options.

  • OldFormat: RichTextEditorFormatType? — Gets the previous formatting status before the change. May be null if there was no prior format.
  • NewFormat: RichTextEditorFormatType — Gets the current formatting status after the change.
    RichTextEditorFormatType contains format details such as bold, italic, underline, strikethrough, subscript, superscript, text color, highlight color, font family, font size, list type, indentation level, alignment, and paragraph format.
xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

<richTextEditor:SfRichTextEditor FormatChanged="OnFormatChanged"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.FormatChanged += OnFormatChanged;

private void OnFormatChanged(object sender, RichTextEditorFormatChangedEventArgs e)
{
    // Handle when format changed
}

HyperlinkClicked Event

The HyperlinkClicked event is fired when a user taps on a hyperlink within the content. The event arguments contain the URL and the text of the clicked link.

xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

<richTextEditor:SfRichTextEditor HyperlinkClicked="OnHyperlinkClicked"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.HtmlText = "<p>Visit the <a href='https://www.syncfusion.com'>Syncfusion</a> website.</p>";
richTextEditor.HyperlinkClicked += OnHyperlinkClicked;


private void OnHyperlinkClicked(object sender, RichTextEditorHyperlinkClickedEventArgs e)
{
    string url = e.URL;
    string text = e.DisplayText;
    // Handle when hyperlink clicked
}

TextChanged Event

The TextChanged event is fired whenever the content in the editor is changed. The event arguments provide the old and new plain text (without HTML formatting) via the OldText and NewText properties.

xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

<richTextEditor:SfRichTextEditor TextChanged="OnTextChanged"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.TextChanged += OnTextChanged;

private void OnTextChanged(object sender, RichTextEditorTextChangedEventArgs e)
{
    string oldText = e.OldText;
    string newText = e.NewText;
    // Handle when Text changed
}

Focused Event

The Focused event occurs when the Rich Text Editor receives input focus.

xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

<richTextEditor:SfRichTextEditor Focused="OnEditorFocused"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.Focused += OnEditorFocused;

private void OnEditorFocused(object sender, EventArgs e)
{
    // Handle when editor focused
}

Unfocused Event

The Unfocused event occurs when the Rich Text Editor loses input focus.

xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

<richTextEditor:SfRichTextEditor Unfocused="OnEditorUnfocused"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.Unfocused += OnEditorUnfocused;

private void OnEditorUnfocused(object sender, EventArgs e)
{
    // Handle when editor loses focus
}

NOTE

Looking for the full .NET MAUI Rich Text Editor component overview, features, pricing, and documentation? Visit the .NET MAUI Rich Text Editor page.