Built-in Tools in RichTextEditor

21 Nov 20223 minutes to read

To initialize the tools, use the following code. You can change the tool’s name as per your requirements. For your reference, here is the bold tool initialized.

private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
        new ToolbarItemModel() { Command = ToolbarCommand.Bold }

The following table lists the tools available in the toolbar.

Name Icons Summary


Allows you to undo the actions.


Allows you to redo the actions.


Aligns the content with the left, center, and right margins.


Creates a new list item(numbered).


Creates a new list item(bulleted).


Allows you to increase the content's indentation level. 


Allows you to decrease the content's indentation level.


Creates a hyperlink from a text or image to a specific location in the content.


Inserts an image from an online source or local computer.


Change the selected content to lower case.


Change the selected content to upper case.


Makes the selected text as subscript (lower).


Makes the selected text as superscript (higher).


Allows the editor's content to be printed. 


Defines the fonts that appear in the Rich Text Editor's Font Family DropDownList.


Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.


Specifies an array of colors that can be used in the color popup for the font color.


Specifies an array of colors that can be used in the color popup for the background color.


An Object with the options that will appear in the Paragraph Format dropdown from the toolbar.


Applies double line strike through formatting for the selected text.


The clear format tool is useful for removing all formatting styles from currently selected text, such as bold, italic, underline, color, superscript, subscript, and more. As a result, all the text formatting will be cleared and returned to its default styles.


Stretches the editor to the maximum width and height of the browser window.


The Rich Text Editor allows users to directly edit HTML code via "Source View." If you make any modifications in the source view directly, synchronise with the design view.


Allows to create list items with various list style types(numbered).


Allows to create list items with various list style types(bulleted).

The tools order can be customized as your application requirement. If you are not specifying any tools order, the editor will create the toolbar with default items.

Removing built-in tool from Toolbar

Remove the build-in tools from the toolbar by using the RichTextEditorToolbarSettings.Items property.

    <RichTextEditorToolbarSettings Items="@Tools" />
    <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>

@code {
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }

Blazor RichTextEditor removed default toolbar items