Customization in .NET MAUI Rich Text Editor (SfRichTextEditor)

29 Oct 202510 minutes to read

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

Customizing the Toolbar

The SfRichTextEditor toolbar is highly customizable, allowing you to control its items, styling, and position.

Add or Remove Toolbar Items

By default, the toolbar includes a comprehensive set of formatting tools. You can specify a custom set of items by populating the ToolbarItems collection. This allows you to add or remove any built-in toolbar item.

The following items are available to be added to the ToolbarItems collection:

  • Bold, Italic, Underline, Strikethrough
  • SubScript, SuperScript
  • FontFamily, FontSize, TextColor, HighlightColor
  • ParagraphFormat , Alignment
  • NumberList, BulletList
  • IncreaseIndent, DecreaseIndent
  • Hyperlink, Image, Table
  • Undo, Redo
  • Separator
<rte:SfRichTextEditor ShowToolbar="True">
    <rte:SfRichTextEditor.ToolbarItems>
        <!-- Define a custom set of toolbar items -->
        <rte:RichTextToolbarItem Type="Bold" />
        <rte:RichTextToolbarItem Type="Italic" />
        <rte:RichTextToolbarItem Type="Underline" />
        <rte:RichTextToolbarItem Type="Separator" />
        <rte:RichTextToolbarItem Type="NumberList" />
        <rte:RichTextToolbarItem Type="BulletList" />
    </rte:SfRichTextEditor.ToolbarItems>
</rte:SfRichTextEditor>
SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.ShowToolbar = true;
richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.Bold });
richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.Italic });
richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.Underline });
richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.Separator });
richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.NumberList });
richTextEditor.ToolbarItems.Add(new RichTextToolbarItem() { Type = RichTextToolbarOptions.BulletList });

Customize Toolbar Appearance

You can customize the visual style of the toolbar using the ToolbarSettings property. This gives you access to the RichTextEditorToolbarSettings object, which has several properties for changing its appearance.

<rte:SfRichTextEditor ShowToolbar="True">
    <rte:SfRichTextEditor.ToolbarSettings>
        <rte:RichTextEditorToolbarSettings BackgroundColor="SkyBlue" SelectionColor="Brown"
                                   TextColor="Orange" IsScrollButtonVisible="True"
                                   SeparatorColor="Brown" SeparatorThickness="5" 
                                   ForwardIconBackground="Blue" ForwardIconColor="Green"
                                   BackwardIconBackground="Yellow" BackwardIconColor="Green"/>
    </rte:SfRichTextEditor.ToolbarSettings>
</rte:SfRichTextEditor>
SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.ShowToolbar = true;
richTextEditor.ToolbarSettings = new RichTextEditorToolbarSettings
{
    IsScrollButtonVisible = true,
    TextColor = Colors.Orange,
    BackgroundColor = Colors.SkyBlue,
    SelectionColor = Colors.Brown,
    SeparatorColor = Colors.Brown,
    SeparatorThickness = 5,
    ForwardIconBackground = Colors.Blue,
    ForwardIconColor = Colors.Green,
    BackwardIconBackground = Colors.Yellow,
    BackwardIconColor = Colors.Green
};

.NET MAUI Rich Text Editor with Toolbar settings

Customize Toolbar Position

The toolbar can be positioned at the top or bottom of the editor control using the ToolbarPosition property.

<rte:SfRichTextEditor ShowToolbar="True" ToolbarPosition="Bottom" />
SfRichTextEditor richTextEditor = new SfRichTextEditor();
richTextEditor.ShowToolbar = true;
richTextEditor.ToolbarPosition = RichTextEditorToolbarPosition.Bottom;

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.
  • BorderColor: Sets the color of the border around the editor control.
  • BorderThickness: Sets the thickness of the border.
  • EnableWordWrap: Specifies whether text should wrap when it reaches the edge of the editor. By default, this is True.
<rte:SfRichTextEditor EditorBackgroundColor="LightYellow"
                      BorderColor="SlateGray"
                      BorderThickness="2"
                      EnableWordWrap="True" />
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.

// 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.

// 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.

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

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

Applying Specific Styles

These methods apply a specific value for a given formatting attribute to the current selection.

// 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.
// 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. You can change its 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.
// Change the URL of an existing hyperlink
richTextEditor.InsertHyperlink("Example", "https://example.com", "https://www.google.com/");

Use the RemoveHyperlink(string text, string Url) method to remove a hyperlink from the document. The link’s 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.
// Remove a specific hyperlink, keeping its text
richTextEditor.RemoveHyperlink("Example", "https://www.google.com/");