How to manage toolbar collections in the MAUI SfRichTextEditor?

In this article, we demonstrate how to programmatically manage the ToolbarItems collection in the .NET MAUI SfRichTextEditor. You’ll learn how to add, remove, clear, and reorder toolbar items to create a customized editing experience.

Step 1: Define Editor and Initialize Toolbar

Define the SfRichTextEditor and an initial toolbar in XAML by setting ShowToolbar=“True” and provide an initial set of items using SfRichTextEditor ToolbarItems.

<rte:SfRichTextEditor x:Name="richTextEditor"  Grid.Column="0" Grid.Row="1" 
                     HtmlText="{Binding MailContent}" 
                     ToolbarItems="{Binding ToolbarItems}" /> 

Step 2: Add Toolbar Items

Add toolbar items (C#) Safely add an item only if it’s not already present.

using Syncfusion.Maui.RichTextEditor;

// Adds a toolbar item if it is not already in the collection.
void AddToolbarItem(RichTextToolbarOptions type)
{
   if (!VM.ToolbarItems.Any(i => i.Type == type))
       VM.ToolbarItems.Add(new RichTextToolbarItem { Type = type });
}

// Example: Add FontSize and TextColor
AddToolbarItem(RichTextToolbarOptions.FontSize);
AddToolbarItem(RichTextToolbarOptions.TextColor); 

Step 3: Remove Toolbar Items

Remove toolbar items (C#) Find the item by Type and remove it.

void RemoveToolbarItem(RichTextToolbarOptions type)
{
   var toRemove = VM.ToolbarItems.FirstOrDefault(i => i.Type == type);
   if (toRemove != null)
       VM.ToolbarItems.Remove(toRemove);
}

// Example: Remove Italic
RemoveToolbarItem(RichTextToolbarOptions.Italic); 

Step 4: Clear Toolbar Items

Clear all items or reset to a default set (C#)

// Clear all toolbar items
void ClearAllToolbarItems()
{
   VM.ToolbarItems.Clear();
}

// Reset to a default set
void ResetDefaultToolbar()
{
   VM.ToolbarItems.Clear();

   VM.ToolbarItems.Add(new RichTextToolbarItem { Type = RichTextToolbarOptions.Bold });
   VM.ToolbarItems.Add(new RichTextToolbarItem { Type = RichTextToolbarOptions.Italic });
   VM.ToolbarItems.Add(new RichTextToolbarItem { Type = RichTextToolbarOptions.Underline });
   VM.ToolbarItems.Add(new RichTextToolbarItem { Type = RichTextToolbarOptions.Separator });
   VM.ToolbarItems.Add(new RichTextToolbarItem { Type = RichTextToolbarOptions.NumberList });
   VM.ToolbarItems.Add(new RichTextToolbarItem { Type = RichTextToolbarOptions.BulletList });
} 

Step 5: Reorder Toolbar Items

Reorder the collection dynamically (C#) You can reorder toolbar items by removing and inserting them at a new index.

// Move an item from one position to another
void MoveItem(int fromIndex, int toIndex)
{
   if (fromIndex < 0 || fromIndex >= VM.ToolbarItems.Count) return;
   if (toIndex   < 0 || toIndex   >= VM.ToolbarItems.Count) return;

   var item = VM.ToolbarItems[fromIndex];
   VM.ToolbarItems.RemoveAt(fromIndex);
   VM.ToolbarItems.Insert(toIndex, item);
}

// Convenience: move left or right by Type
void MoveLeft(RichTextToolbarOptions type)
{
   var index = VM.ToolbarItems.ToList().FindIndex(i => i.Type == type);
   if (index > 0)
       MoveItem(index, index - 1);
}

void MoveRight(RichTextToolbarOptions type)
{
   var index = VM.ToolbarItems.ToList().FindIndex(i => i.Type == type);
   if (index >= 0 && index < VM.ToolbarItems.Count - 1)
       MoveItem(index, index + 1);
}

// Example: move BulletList one step to the left or right
MoveLeft(RichTextToolbarOptions.BulletList);
MoveRight(RichTextToolbarOptions.BulletList); 

Output:

For more details, please refer to the project on GitHub sample.

Conclusion

I hope you found this helpful for customizing the toolbar in the .NET MAUI SfRichTextEditor.

You can refer to our MAUI RichTextEditor feature tour page to learn about its other groundbreaking feature representations. For detailed guidance, refer to our .NET MAUI Rich Text Editor documentation.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!