Toolbar types in Blazor RichTextEditor

11 Aug 202214 minutes to read

The Rich Text Editor toolbar contains a collection of tools such as bold, Italic, and text alignment buttons that are used to format the content. However, in most integrations, you can customize the toolbar configurations easily to suit your needs.

Toolbar

The editor allows to configure different types of toolbar using RichTextEditorToolbarSettings.Type property. The types of toolbar are:

  1. Expand
  2. MultiRow

Expand Toolbar

The default mode of ToolbarType.Expand to hide the overflowing items in the next row. By clicking the expand arrow, view the overflowing toolbar items.

@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 } 
    }; 
}

Blazor RichTextEditor with Expand Toolbar

Multi-row Toolbar

Set the ToolbarType.MultiRow to display the toolbar items in a row-wise format. All toolbar items are visible always.

@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 with MultiRow Toolbar

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

Enable or disable the floating toolbar using RichTextEditorToolbarSettings.EnableFloating property.

@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 with MultiRow Toolbar

Quick Toolbar

The Rich text editor has quick toolbars that are open as context-menu on clicking the image, link, 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

Image quick Toolbar

Image tools used to insert an image to the editor and click on the image to easily customize the image using quick toolbar. The 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
@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: 300px; height: 300px; transform: rotate(0deg);' src='https://blazor.syncfusion.com/demos/images/RichTextEditor/RTEImage-Feather.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.HorizontalSeparator },
        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 with Image Toolbar

You can customize the selected link inside the editor through the quick toolbar.The quick toolbar for link has the following options.

Tools Description
Open The given link page will open in new window
Edit Link Edits the link in the Rich Text Editor content
Remove Link Removes link from the content of Rich Text Editor
@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: 300px; height: 300px; transform: rotate(0deg);' src='https://blazor.syncfusion.com/demos/images/RichTextEditor/RTEImage-Feather.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 with Link Toolbar

Table quick Toolbar

Quick toolbar is opened by clicking the table. 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
@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.TableRows },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableColumns },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableCell },
        new TableToolbarItemModel() { Command = TableToolbarCommand.HorizontalSeparator },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableRemove },
        new TableToolbarItemModel() { Command = TableToolbarCommand.BackgroundColor },
        new TableToolbarItemModel() { Command = TableToolbarCommand.TableCellVerticalAlign },
        new TableToolbarItemModel() { Command = TableToolbarCommand.Styles }
    };
}

Blazor RichTextEditor with Table Toolbar

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.

See also