Toolbar Configuration in Blazor Rich Text Editor

8 Oct 202524 minutes to read

The Rich Text Editor toolbar provides a collection of tools such as Bold, Italic, and text alignment buttons used to format the content.

You can customize the toolbar configurations by using the RichTextEditorToolbarSettings.Type property. The types of toolbar are:

Expand
MultiRow
Scrollable
Popup

The Expand toolbar hides overflowing items in the next line using the property. By clicking the expand arrow, you can view the overflowing toolbar items. The default mode of toolbar is Expand.

RAZOR
@using Syncfusion.Blazor.RichTextEditor 

<SfRichTextEditor> 
    <RichTextEditorToolbarSettings Items="@Tools" Type="ToolbarType.Expand" />
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> 
</SfRichTextEditor> 

@code{ 
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
    { 
        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Underline }, 
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, 
        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Formats }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, 
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Indent }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Image }, 
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Undo }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Redo } 
    }; 
}

The MultiRow toolbar displays items in multiple rows, ensuring all items are always visible.

RAZOR
@using Syncfusion.Blazor.RichTextEditor 

<SfRichTextEditor> 
    <RichTextEditorToolbarSettings Items="@Tools" Type="ToolbarType.MultiRow" />
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> 
</SfRichTextEditor> 

@code{ 
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
    { 
        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Underline }, 
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, 
        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Formats }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, 
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Indent }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Image }, 
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Undo }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Redo } 
    }; 
}

Blazor RichTextEditor multirow toolbar

The Scrollable toolbar displays items in a single row with horizontal scrolling enabled.

RAZOR
@using Syncfusion.Blazor.RichTextEditor 

<SfRichTextEditor> 
    <RichTextEditorToolbarSettings Items="@Tools" Type="ToolbarType.Scrollable" />
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> 
</SfRichTextEditor> 

@code{ 
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>() 
    { 
        new ToolbarItemModel() { Command = ToolbarCommand.Bold }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Italic }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Underline }, 
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, 
        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Formats }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, 
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Indent }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Image }, 
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Separator }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Undo }, 
        new ToolbarItemModel() { Command = ToolbarCommand.Redo } 
    }; 
}

Blazor RichTextEditor multirow toolbar

The Popup toolbar property displays items in a popup container, ideal for limited space or smaller screens.

RAZOR
@using Syncfusion.Blazor.RichTextEditor 

<SfRichTextEditor> 
    <RichTextEditorToolbarSettings Type="ToolbarType.Popup" />
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> 
</SfRichTextEditor>

Blazor RichTextEditor multirow toolbar

By default, toolbar is float at the top of the Rich Text Editor on scrolling. It can be customized by specifying the offset of the floating toolbar from documents top position using FloatingToolbarOffset.

You can enable or disable the floating toolbar using RichTextEditorToolbarSettings.EnableFloating property.

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor Height="800px">
    <RichTextEditorToolbarSettings EnableFloating="true" />
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
</SfRichTextEditor>

Blazor RichTextEditor floating toolbar

The Rich Text Editor allows you to position the toolbar at the top or bottom of the content area, depending on your layout requirements.

By default, the toolbar is displayed at the top of the editor, making all formatting and editing tools immediately accessible above the content.

To move the toolbar to the bottom, use the RichTextEditorToolbarSettings.Position property and set its value to Bottom. This places the toolbar below the content area, which can help maintain a cleaner top layout and improve accessibility in certain use cases.

RAZOR
@using Syncfusion.Blazor.RichTextEditor 

<SfRichTextEditor> 
    <RichTextEditorToolbarSettings Position="ToolbarPosition.Bottom" />
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> 
</SfRichTextEditor>

Blazor RichTextEditor multirow toolbar

The Rich text editor has quick toolbars that are open as context-menu on clicking the image, link, audio, video and table elements. By default, the below quick toolbar items show on click on the corresponding elements. You can customize the quick toolbar items using the RichTextEditorQuickToolbarSettings property.

Target Element	Default Quick Toolbar items
Image	Replace, Align, Caption, Remove, InsertLink, Display, AltText, Dimension
Link	Open, Edit, UnLink
Table	TableHeader, TableRows, TableColumns, BackgroundColor, TableRemove, Alignments, TableCellVerticalAlign, Styles
Audio	AudioReplace, AudioRemove, AudioLayoutOption
Video	VideoReplace, VideoAlign, VideoRemove, VideoLayoutOption, VideoDimension
Text	No Default item have it and it support the all toolbar items

Customize the inserted image using the RichTextEditorQuickToolbarSettings.Image property. The image quick toolbar has the following items.

Image Toolabr items	Description
Replace	Can replace the image with some other image
Align	Align the image with left, right and justify
Caption	Set the captions for the image
Remove	Delete the image
InsertLink	Provide the link to the image
Display	Display the image as inline or with break
AltText	Provide the alternative text for the image if the image is not present in the location
Dimension	Can change an image dimensions, such as its height and width

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorQuickToolbarSettings Image="@Image" />
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
    <p><b>Get started Quick Toolbar to click on the image</b></p>
    <p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
    <img alt='Logo' style='width: 150px; height: 150px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />
</SfRichTextEditor>

@code {
    private List<ImageToolbarItemModel> Image = new List<ImageToolbarItemModel>()
    {
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Separator },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },
        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }
    };
}

Blazor RichTextEditor image quick toolbar

Customize the selected link using the RichTextEditorQuickToolbarSettings.Link property. The quick toolbar for link has the following options.

Tools	Description
Open	The given link page will open in new window
Edit	Edits the link in the Rich Text Editor content
UnLink	Removes link from the content of Rich Text Editor

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorQuickToolbarSettings Link="@Link" />
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
    <p><b>Get started Quick Toolbar to click on the link</b></p>
    <p>It is possible to add custom style on the selected link inside the Rich Text Editor through quick toolbar.</p>
    <img alt='Logo' style='width: 150px; height: 150px; transform: rotate(0deg);' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png' />
</SfRichTextEditor>

@code {
    private List<LinkToolbarItemModel> Link = new List<LinkToolbarItemModel>()
    {
        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open },
        new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit },
        new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink }
    };
}

Blazor RichTextEditor link quick toolbar

The table quick toolbar appears when clicking on a table. You can customize the table by using the RichTextEditorQuickToolbarSettings.Table property. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily.

Tools	Description
TableHeader	Header row can be added or removed from the inserted table
TableRows	Can be inserted above or below the required table cell
TableColumns	Can be inserted to the left or right side of the required table cell
BackgroundColor	Can be set each table cell background color
TableRemove	Can be delete the entire table from editor
Alignments	Can be aligned the table content
Styles	Can be style the table border

RAZOR
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorQuickToolbarSettings Table="TableQuickToolbarItems" />
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
    <p><b>Get started Quick Toolbar to click on the Table</b></p>
    <p>It is possible to add custom style on the selected table inside the Rich Text Editor through quick toolbar.</p>
    
</SfRichTextEditor>

@code {
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
    };
    private List<TableToolbarItemModel> TableQuickToolbarItems = new List<TableToolbarItemModel>()
    {
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableHeader },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableRemove },
        new TableToolbarItemModel() { Command = TableToolbarCommand.Separator },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableRows },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableColumns },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableCell },
        new TableToolbarItemModel() { Command = TableToolbarCommand.Separator },
        new TableToolbarItemModel() { Command = TableToolbarCommand.Styles },
        new TableToolbarItemModel() { Command = TableToolbarCommand.BackgroundColor },
        new TableToolbarItemModel() { Command = TableToolbarCommand.Alignments },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableCellVerticalAlign }
    };
}

Blazor RichTextEditor table quick toolbar

Customize the inserted audio using the RichTextEditorQuickToolbarSettings.Audio property. The audio quick toolbar has the following items.

Tools	Description
AudioReplace	Can replace the audio with some other audio
AudioRemove	Delete the audio
AudioLayoutOption	Display the audio as inline or with break

RAZOR
@using Syncfusion.Blazor.RichTextEditor;

<SfRichTextEditor>
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorQuickToolbarSettings Audio="AudioQuickToolbarItems" />
    <p><b>Get started with Quick Toolbar to click on an audio</b></p>
    <p>Using the quick toolbar, users can replace, display, and delete the selected audio.</p>
    
</SfRichTextEditor>

@code {
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Audio },
    };
    private List<AudioToolbarItemModel> AudioQuickToolbarItems = new List<AudioToolbarItemModel>()
    {
        new AudioToolbarItemModel() { Command = AudioToolbarCommand.AudioRemove },
        new AudioToolbarItemModel() { Command = AudioToolbarCommand.AudioReplace},
        new AudioToolbarItemModel() { Command = AudioToolbarCommand.AudioLayoutOption }
    };
}

Blazor RichTextEditor audio quick toolbar

Customize the inserted video using the RichTextEditorQuickToolbarSettings.video property. The video quick toolbar has the following items.

Tools	Description
VideoReplace	Can replace the video with some other video
VideoAlign	Align the image with left, right and center
VideoRemove	Delete the video
VideoLayoutOption	Display the video as inline or with break
VideoDimension	Can change an video dimensions, such as its height and width

RAZOR
@using Syncfusion.Blazor.RichTextEditor;

<SfRichTextEditor>
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorQuickToolbarSettings Video="VideoQuickToolbarItems" />
    <p><b>Get started with Quick Toolbar to click on a video</b></p>
    <p>Using the quick toolbar, users can replace, align, display, dimension, and delete the selected video.</p>
    
</SfRichTextEditor>

@code {
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Video },
    };
    private List<VideoToolbarItemModel> VideoQuickToolbarItems = new List<VideoToolbarItemModel>()
    {
        new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoReplace },
        new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoRemove},
        new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoLayoutOption },
        new VideoToolbarItemModel() { Command = VideoToolbarCommand.Separator },
        new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoAlign},
        new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoDimension}
    };
}

Blazor RichTextEditor video quick toolbar

NOTE

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to knows how to render and configure the rich text editor tools.

By activating the RichTextEditorQuickToolbarSettings.Text property, the Rich Text Editor offers the ability to display a quick toolbar when needed. The floating toolbar shows up when you select or focus on editable text. By modifying the RichTextEditorQuickToolbarSettings.Text property, the commands shown in the text quick toolbar can be changed.

RAZOR

private List<ToolbarItemModel> textQuickToolbarItems = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
    };

Refer to the following link for a complete list of available toolbar items:

https://blazor.syncfusion.com/documentation/rich-text-editor/tools/built-in-tools

RAZOR
<SfRichTextEditor>
    <RichTextEditorQuickToolbarSettings Text="@TextQuickToolbarItems"></RichTextEditorQuickToolbarSettings>
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
</SfRichTextEditor>

@code {
    private List<ToolbarItemModel> TextQuickToolbarItems = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Blockquote },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
    };
}

Blazor RichTextEditor removed default toolbar items

Search docs

Ask HelpBot

Search docs

Ask HelpBot

See also

Toolbar types in Blazor Rich Text Editor

Expand toolbar

Multi-row toolbar

Scrollable toolbar

Configuring a popup toolbar

Floating toolbar

Configuring the toolbar position

Quick toolbar

Image quick toolbar

Link quick toolbar

Table quick toolbar

Audio quick toolbar

Video quick toolbar

Text quick toolbar

See also