New to Telerik UI for Blazor? Start a free 30-day trial

Editor Built-in Tools

This article explains which are the built-in tools and commands of the Editor, how to invoke them programmatically and what functionality they offer.

How to Use this Article

This article describes the Editor tools and commands.

An Editor tool is the visible interface for a given action. For example, the button that bolds text is a tool. Built-in tools can render as buttons, color pickers or dropdown lists. The Editor also supports custom tools with custom rendering.

An Editor command is the action, which modifies the HTML value in some way. Each built-in Editor tool has an associated command. Custom tools can execute business logic or invoke built-in commands.

The information about the Editor tools and commands is organized in tables below. Here is what the table headers mean:

Class Name - use it to add the tool to the Editor toolbar
Command Name - use it to execute the command programmatically. In this case, also use the syntax from the Argument column.
Tool Type - a tool can be a button, a dropdown list or a color picker. Each of these three types exposes some customization options. See the examples for the color tools, font tools and the Format tool. Only buttons can be added to tool groups in the toolbar.
Description - information about what the tool and command do.
Argument for ExecuteAsync - shows the expected class instance and parameters that you must pass to the Editor's ExecuteAsync method to invoke the command programmatically.

Here is a simple example that demonstrates how to use class names, command names and ExecuteAsync arguments.

Use tool class names and command names with the Blazor Editor

@using Telerik.Blazor.Components.Editor
@* Avoid ambiguous reference with SVG icons *@
@using EditorNS = Telerik.Blazor.Components.Editor;

<TelerikButton OnClick="@InsertParagraph">Insert Paragraph in the Editor</TelerikButton>

<TelerikEditor @ref="EditorRef"
               Tools="@EditorTools"
               @bind-Value="@EditorValue">
</TelerikEditor>

@code {
    private TelerikEditor EditorRef { get; set; }

    private string EditorValue { get; set; } = @"<p>foo</p><p>bar</p>";

    // "Bold", "Italic" and "Underline" are class names
    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() {
        new EditorNS.Bold(),
        new EditorNS.Italic(),
        new EditorNS.Underline()
    };

    private async Task InsertParagraph()
    {
        // "insertHtml" is a command name
        // HtmlCommandArgs is the ExecuteAsync argument
        await EditorRef.ExecuteAsync(new HtmlCommandArgs("insertHtml", $"<p>baz {DateTime.Now.Millisecond}</p>"));
    }
}

Built-in Tools and Commands

Inline Tools
- Color Tool Customization
- Font Tool Customization
Block Tools
- Format Tool Customization
Table Tools
Commands Without Built-in Tools
Programmatic Command Execution

When choosing which Editor tools to render, it is possible to create a tools collection from scratch or append additional tools to a preset collection.

Inline Tools

The inline tools add or work with inline HTML elements. For example, such elements are <a>, <img>, <strong> and <em>.

Table 1: Inline Tools of the Editor

Class Name	Command Name	Tool Type	Description	Argument for ExecuteAsync
Bold	bold	button	Applies bold style	new ToolCommandArgs(string commandName)
BackgroundColor	backColor	color	Changes the background color	new FormatCommandArgs(string commandName, string Value)
ForeColor	foreColor	color	Changes the text color	new FormatCommandArgs(string commandName, string Value)
CreateLink	createLink	button	Creates a hyperlink	new LinkCommandArgs(string href, string text, string target, string title, null)
FontFamily	fontFamily	dropdown	Sets the font typeface	new FormatCommandArgs(string commandName, string Value)
FontSize	fontSize	dropdown	Sets the text font size	new FormatCommandArgs(string commandName, string Value)
Italic	italic	button	Applies italic style	new ToolCommandArgs(string commandName)
Strikethrough	strikethrough	button	Applies strikethrough formatting	new ToolCommandArgs(string commandName)
SubScript	subscript	button	Makes the selected text subscript	new ToolCommandArgs(string commandName)
SuperScript	superscript	button	Makes the selected text superscript	new ToolCommandArgs(string commandName)
Underline	underline	button	Applies underline style	new ToolCommandArgs(string commandName)
Unlink	unlink	button	Removes a hyperlink	new ToolCommandArgs(string commandName)

Color Tool Customization

The ForeColor and BackgroundColor tools expose a few customization properties:

Property	Type and Default Value	Description
`Colors`	`IEnumerable<string>`.	The list of available colors to set from the Color tool. You can provide a member of `ColorPalettePresets`, or a custom list of RGB(A) or HEX colors in different supported formats.
`Title`	`string`	The tooltip content that shows on tool mouse over.
`ValueFormat`	`ColorFormat` enum (`Rgb`)	The format, which the Color tool will set in the generated HTML markup. Use `Rgb` or `Hex`.

Customizing the Editor Color Tools

@using Telerik.Blazor.Components.Editor

<TelerikEditor Tools="@EditorTools"
               @bind-Value="@EditorValue">
</TelerikEditor>

@code {
    private string EditorValue { get; set; }

    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>()
    {
        new ForeColor()
        {
            Title = "Text Color",
            Colors = new List<string> { "#f00", "#ff9900", "rgb(0, 128, 0)", "rgba(0, 0, 255, .8)" },
            ValueFormat = ColorFormat.Hex
        },
        new BackgroundColor()
        {
            Title = "Background Color",
            Colors = ColorPalettePresets.Basic,
            ValueFormat = ColorFormat.Hex
        }
    };
}

Font Tool Customization

The FontFamily and FontSize tools have a Data property that accepts a List<EditorDropDownListItem>. Use it to customize the available options in these dropdowns. You can also change the dropdown label via DefaultText.

@using Telerik.Blazor.Components.Editor
@* Avoid ambiguous reference with SVG icons *@
@using EditorNS = Telerik.Blazor.Components.Editor;

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@EditorTools">
</TelerikEditor>

@code {
    private string EditorValue { get; set; }

    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>()
    {
        new EditorNS.FontFamily()
        {
            DefaultText = "Font Family",
            Data = new List<EditorDropDownListItem>()
            {
                new EditorDropDownListItem("Georgia", "georgia"),
                new EditorDropDownListItem("Lucida Console", "'lucida console'")
            }
        },
        new EditorNS.FontSize()
        {
            DefaultText = "Text Size",
            Data = new List<EditorDropDownListItem>()
            {
                new EditorDropDownListItem("Small", "12px"),
                new EditorDropDownListItem("Medium", "16px"),
                new EditorDropDownListItem("Large", "24px")
            }
        }
    };
}

Block Tools

The block tools add or work with block HTML elements, like <h1>, <h2>, <p> and <ul>.

All tools in the table below are buttons, except Format, which is a dropdown.

Table 2: Block Tools of the Editor

Class Name	Command Name	Description	Argument for ExecuteAsync
AlignCenter	alignCenter	Aligns the selected paragraph to the center	new ToolCommandArgs(string commandName)
AlignJustify	alignJustify	Justifies the selected paragraph	new ToolCommandArgs(string commandName)
AlignLeft	alignLeft	Aligns the selected paragraph to the left	new ToolCommandArgs(string commandName)
AlignRight	alignRight	Aligns the selected paragraph to the right	new ToolCommandArgs(string commandName)
Format	format	Applies standard formatting to the selected text like Heading 1, Paragraph and so on. Unlike the other tools in this table, this one is a dropdown.	new FormatCommandArgs(string commandName, string Value)
Indent	indent	Adds indent to the selected text	new ToolCommandArgs(string commandName)
InsertImage	insertImage	Inserts image from a desired URL	new ImageCommandArgs(string src, string alt, string width, string height)
OrderedList	insertOrderedList	Creates a list of numeric bullets	new ToolCommandArgs(string commandName)
Outdent	outdent	Removes indent from the selected text	new ToolCommandArgs(string commandName)
Redo	redo	Repeats the last undone action	new ToolCommandArgs(string commandName)
ViewHtml	setHtml	Shows and updates the raw HTML of the Editor content	new HtmlCommandArgs(string commandName, string value)
Undo	undo	Reverts the last action	new ToolCommandArgs(string commandName)
UnorderedList	insertUnorderedList	Creates a list of bullets	new ToolCommandArgs(string commandName)

Format Tool Customization

The Format tool exposes a Data property that accepts a List<EditorDropDownListItem>. Use it to reduce or reorder the items in the dropdown list.

@using Telerik.Blazor.Components.Editor

<TelerikEditor @bind-Value="@EditorValue"
               Tools="@EditorTools">
</TelerikEditor>

@code {
    private string EditorValue { get; set; }

    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>()
    {
        new Format()
        {
            Data = new List<EditorDropDownListItem>()
            {
                new EditorDropDownListItem("Paragraph", "p"),
                new EditorDropDownListItem("Heading 1", "h1")
            }
        }
    };
}

Table Tools

The table tools create and manipulate HTML <table> elements. These tools can add or remove columns and rows, and merge or split cells.

All tools in the table below are buttons.

Table 3: Editor Table Tools

Class Name	Command Name	Description	Argument for ExecuteAsync
InsertTable	insertTable	Inserts a table with the desired number of columns and rows	new TableCommandArgs(int rows, int cols)
DeleteTable	deleteTable	Deletes the selected HTML table	new ToolCommandArgs(string commandName)
AddColumnBefore	addColumnBefore	Inserts a column before the selected one	new ToolCommandArgs(string commandName)
AddColumnAfter	addColumnAfter	Inserts a column after the selected one	new ToolCommandArgs(string commandName)
AddRowBefore	addRowBefore	Inserts a row before the selected one	new ToolCommandArgs(string commandName)
AddRowAfter	addRowAfter	Inserts a row after the selected one	new ToolCommandArgs(string commandName)
DeleteRow	deleteRow	Deletes the selected row	new ToolCommandArgs(string commandName)
DeleteColumn	deleteColumn	Deletes the selected column	new ToolCommandArgs(string commandName)
MergeCells	mergeCells	Merges the selected cells	new ToolCommandArgs(string commandName)
SplitCell	splitCell	Splits already merged cells	new ToolCommandArgs(string commandName)

Commands Without Built-in Tools

Some Editor commands have no built-in tools. These commands can only be invoked programmatically.

Table 4: Editor Commands Without Tools

Command Name	Description	Arguments for ExecuteAsync
cleanFormatting	Cleans the inline formatting of a selected text	new ToolCommandArgs(string commandName)
insertHtml	Inserts HTML at the cursor position. To insert multiple nodes, wrap them in a single element. By default this is a block command that will wrap passed inline content in a `p` or `div`, depending on the context. To insert inline content, set the third argument to `true`. Note there are separate commands for inserting links and images.	new HtmlCommandArgs(string commandName, string value, bool inline)

Programmatic Execution

You can invoke the built-in Editor commands from outside the component or from custom tools.

In order to do so, you need to use the Editor reference and to call the ExecuteAsync method.

Use the reference tables above to find the command name and its arguments for the command you want to invoke.

Execute commands from buttons outside the Editor

@* Click on the buttons to execute the Editor tools *@

@using Telerik.Blazor.Components.Editor

<TelerikButton OnClick="@InsertHr">Insert hr</TelerikButton>
<TelerikButton OnClick="@BoldText">Create bold text</TelerikButton>
<TelerikButton OnClick="@InsertTable">Insert Table</TelerikButton>
<TelerikButton OnClick="@InsertImage">Insert Image</TelerikButton>
<TelerikButton OnClick="@InsertInlineText">Insert Inline Text</TelerikButton>

<TelerikEditor @ref="@TheEditor" @bind-Value="@TheContent"></TelerikEditor>

@code{
    TelerikEditor TheEditor { get; set; }

    string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";

    async Task InsertHr()
    {
        await TheEditor.ExecuteAsync(new HtmlCommandArgs("insertHtml", "<hr />"));
    }

    async Task InsertInlineText()
    {
        await TheEditor.ExecuteAsync(new HtmlCommandArgs("insertHtml", "John Doe", true));
    }

    async Task InsertImage()
    {
        await TheEditor.ExecuteAsync(new ImageCommandArgs("https://demos.telerik.com/blazor-ui/images/articles/1-220x140.png", "the alt text", "220px", "140px"));
    }

    async Task BoldText()
    {
        await TheEditor.ExecuteAsync(new ToolCommandArgs("bold"));
    }

    async Task InsertTable()
    {
        await TheEditor.ExecuteAsync(new TableCommandArgs(4, 4));
    }
}