Customization in .NET MAUI Rich Text Editor (SfRichTextEditor)

20 Jul 20266 minutes to read

The .NET MAUI Rich Text Editor control provides extensive options for customizing its appearance and functionality, from the editor area to programmatic formatting and hyperlink management.

Customizing Editor Appearance

The SfRichTextEditor provides several properties to customize the appearance of the main editor area, including its background, border, and text wrapping behavior.

  • EditorBackgroundColor: Sets the background color of the content area. Default value is Colors.White (Color).
  • BorderColor: Sets the color of the border around the editor control. Default value is #CAC4D0 (Color).
  • BorderThickness: Sets the thickness of the border. Default value is 1.0d (double).
  • EnableWordWrap: Specifies whether text should wrap when it reaches the edge of the editor. By default, this is True.
xmlns:richTextEditor="clr-namespace:Syncfusion.Maui.RichTextEditor;assembly=Syncfusion.Maui.RichTextEditor"

<richTextEditor:SfRichTextEditor EditorBackgroundColor="LightYellow"
                      BorderColor="SlateGray"
                      BorderThickness="2"
                      EnableWordWrap="True"/>
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.EditorBackgroundColor = Colors.LightYellow;
richTextEditor.BorderColor = Colors.SlateGray;
richTextEditor.BorderThickness = 2;
richTextEditor.EnableWordWrap = true;

.NET MAUI Customizing Rich Text Editor

Programmatic Formatting

The SfRichTextEditor provides a comprehensive set of methods to apply formatting programmatically. These methods are useful when you want to create your own custom UI for formatting or apply styles dynamically without relying on the built-in toolbar.

The following code examples assume you have an instance of SfRichTextEditor named richTextEditor.

Toggling Character Formatting

You can easily toggle common text styles like bold, italic, and underline on the current text selection.

using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
// Toggle bold on the selected text
richTextEditor.ToggleBold();

// Toggle italic on the selected text
richTextEditor.ToggleItalic();

// Toggle underline on the selected text
richTextEditor.ToggleUnderline();

Toggling List Formatting

You can format the selected paragraphs as a bulleted or numbered list.

using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
// Apply or remove a bulleted list from the current paragraph
richTextEditor.ToggleBulletList();

// Apply or remove a numbered list from the current paragraph
richTextEditor.ToggleNumberList();

Applying Text Alignment

These methods allow you to set the text alignment for the selected paragraphs.

using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
// Justify the text in the current paragraph
richTextEditor.AlignJustify();

// Align the text to the right
richTextEditor.AlignRight();

Applying Specific Styles

These methods apply specific formatting values to the current selection.

The following table lists the available values for the RichTextEditorParagraphFormat enum:

Value Description
Paragraph Normal paragraph.
Heading1 Heading level 1.
Heading2 Heading level 2.
Heading3 Heading level 3.
Heading4 Heading level 4. 
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
// Apply a new font family and size
richTextEditor.ApplyFontFamily("Arial");
richTextEditor.ApplyFontSize(18);

// Apply a text color and highlight color
richTextEditor.ApplyTextColor(Colors.Blue);
richTextEditor.ApplyHighlightColor(Colors.Yellow);

// Format the current paragraph as a heading 1
richTextEditor.ApplyParagraphFormat(RichTextEditorParagraphFormat.Heading1);

The SfRichTextEditor allows you to programmatically insert, edit, and remove hyperlinks from the content.

Use the InsertHyperlink(string displayText, string url) method to add a new hyperlink at the current cursor position or over the selected text.

  • displayText: The text to be displayed for the hyperlink.
  • url: The URL the hyperlink will point to.
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
// Insert a new hyperlink
richTextEditor.InsertHyperlink("Example", "https://example.com");

Use the EditHyperlink(string text, string oldUrl, string newUrl) method to modify an existing hyperlink’s target URL.

  • text: The existing display text for the hyperlink.
  • oldUrl: The original URL of the hyperlink you want to edit.
  • newUrl: The new URL for the hyperlink.
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
// Change the URL of an existing hyperlink
richTextEditor.EditHyperlink("Example", "https://example.com", "https://www.google.com/");

Use the RemoveHyperlink(string text, string url) method to remove a hyperlink from the document. The display text will remain in place as plain text.

  • text: The display text of the hyperlink to remove.
  • url: The URL of the hyperlink to remove.
using Syncfusion.Maui.RichTextEditor;

SfRichTextEditor richTextEditor = new SfRichTextEditor();
// Remove a specific hyperlink, keeping its text
richTextEditor.RemoveHyperlink("Example", "https://www.google.com/");