Components / Editor

New to Telerik UI for Blazor? Download 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:

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

<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 Bold(),
        new Italic(),
        new 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

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 Colors property that accepts a color collection as IEnumerable<string>. You can provide a member of ColorPalettePresets, or a custom list of RGB(A) or HEX colors in different supported formats. It is also possible to change the tooltips via Title.

@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)" }
        },
        new BackgroundColor()
        {
            Title = "Background Color",
            Colors = ColorPalettePresets.Basic
        }
    };
}

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

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

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

    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>()
    {
        new FontFamily()
        {
            DefaultText = "Font Family",
            Data = new List<EditorDropDownListItem>()
            {
                new EditorDropDownListItem("Georgia", "georgia"),
                new EditorDropDownListItem("Lucida Console", "'lucida console'")
            }
        },
        new 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));
    }
}

See Also

In this article
Related articles
Not finding the help you need? Improve this article