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

Undo

Allows you to undo the actions.

Redo

Allows you to redo the actions.

Alignment

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

OrderedList

Creates a new list item(numbered).

UnorderedList

Creates a new list item(bulleted).

Indent

Allows you to increase the content's indentation level. 

Outdent

Allows you to decrease the content's indentation level.

Hyperlink

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

Images

Inserts an image from an online source or local computer.

LowerCase

Change the selected content to lower case.

UpperCase

Change the selected content to upper case.

SubScript

Makes the selected text as subscript (lower).

SuperScript

Makes the selected text as superscript (higher).

Print

Allows the editor's content to be printed. 

FontName

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

FontSize

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

FontColor

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

BackgroundColor

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

Format

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

StrikeThrough

Applies double line strike through formatting for the selected text.

ClearFormat

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

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

SourceCode

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

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

BulletFormatList

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