Built-in Tools in RichTextEditor

6 Jun 20243 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

Undo

Undo in Blazor RichTextEditor

Allows you to undo the actions.

Redo

Redo in Blazor RichTextEditor

Allows you to redo the actions.

Alignment

Alignment in Blazor RichTextEditor

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

OrderedList

Ordered list in Blazor RichTextEditor

Creates a new list item(numbered).

UnorderedList

Unordered list in Blazor RichTextEditor

Creates a new list item(bulleted).

Indent

Indent in Blazor RichTextEditor

Allows you to increase the content's indentation level. 

Outdent

Outdent in Blazor RichTextEditor

Allows you to decrease the content's indentation level.

Hyperlink

Hyperlink in Blazor RichTextEditor

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

Images

Images in Blazor RichTextEditor

Inserts an image from an online source or local computer.

LowerCase

Lower case in Blazor RichTextEditor

Change the selected content to lower case.

UpperCase

Uppercase in Blazor RichTextEditor

Change the selected content to upper case.

SubScript

Sub script in Blazor RichTextEditor

Makes the selected text as subscript (lower).

SuperScript

Super script in Blazor RichTextEditor

Makes the selected text as superscript (higher).

Print

Print in Blazor RichTextEditor

Allows the editor's content to be printed. 

FontName

Font name in Blazor RichTextEditor

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

FontSize

Font size in Blazor RichTextEditor

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

FontColor

Font color in Blazor RichTextEditor

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

BackgroundColor

Background color in Blazor RichTextEditor

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

Format

Format in Blazor RichTextEditor

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

Blockquote

Blockquote in Blazor RichTextEditor

Blockquotes visually highlight important text within an editor, emphasizing key information or quotations.

StrikeThrough

Strike through in Blazor RichTextEditor

Applies double line strike through formatting for the selected text.

ClearFormat

Clear format in Blazor RichTextEditor

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.

FullScreen

Full screen in Blazor RichTextEditor

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

SourceCode

Source code in Blazor RichTextEditor

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.

NumberFormatList

Number format list in Blazor RichTextEditor

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

BulletFormatList

Bullet format list in Blazor RichTextEditor

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.

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

@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