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.

RAZOR

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.
Blockquote		Blockquotes visually highlight important text within an editor, emphasizing key information or quotations.
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.

RAZOR

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