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 of the Editor, how to invoke them programatically and what functionality they offer.

In this article:

Built-in Tools

The sections below list the tools that come with the editor and provide the following information:

  • Tool Name - the human-readable name of the tool.

  • Command Name - the commandName of the tool for executing it programmatically.

  • Tool Type - the type of the tool - whether it is a button, a dropdown or a color tool. Only buttons can be added to tool groups in the toolbar.

  • Description - more detailed information on what the tool does.

  • Class Name - the name of the class that you need to instantiate in order to add the tool to the toolbar in your own code.

  • Arguments - the type of the argument you must pass to the ExecuteAsync method of the editor in order to invoke the command programmatically.

There are the following types of tools:

Inline Tools

The Inline tools work with or add an inline HTML element. Example of these are an <a>, <img>, <strong> and <em>.

Table 1: Inline tools in the Editor

Tool Name Command Name Tool Type Description Class Name Arguments
Bold bold Button Applies bold formatting to the selected text new Bold() new ToolCommandArgs(string commandName)
BackgroundColor backColor Color Change the background color of the selected text new BackgroundColor() new FormatCommandArgs(string commandName, string Value)
ForeColor foreColor Color Change the font color of a selected text new ForeColor() new FormatCommandArgs(string commandName, string Value)
CreateLink createLink Button Create a hyperlink from the selected text new CreateLink() new LinkCommandArgs(string href, string text, string target, string title, null)
FontFamily fontFamily DropDown Specify the font typeface for the selected text new FontFamily() new FormatCommandArgs(string commandName, string Value)
FontSize fontSize DropDown Specify the size of the selected text new FontSize() new FormatCommandArgs(string commandName, string Value)
Italic italic Button Applies italic formatting to the selected text new Italic() new ToolCommandArgs(string commandName)
Strikethrough strikethrough Button Applies strikethrough formatting to the selected text new Strikethrough() new ToolCommandArgs(string commandName)
SubScript subscript Button Makes the selected text subscript new SubScript() new ToolCommandArgs(string commandName)
SuperScript superscript Button Makes the selected text superscript new SuperScript new ToolCommandArgs(string commandName)
Underline underline Button Applies underline formatting to the selected text new Underline() new ToolCommandArgs(string commandName)
Unlink unlink Button Remove a hyperlink new Unlink() 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.

@using Telerik.Blazor.Components.Editor

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

@code {
    string Value { get; set; }

    List<IEditorTool> Tools { get; set; } = new List<IEditorTool>() {
        new ForeColor() { Colors = new List<string> { "#f00", "#ff9900", "rgb(0, 128, 0)", "rgba(0, 0, 255, .8)" } },
        new BackgroundColor() { Colors = ColorPalettePresets.Basic }
    };
}

Block Tools

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

Table 2: Block tools in the Editor

Tool Name Command Name Tool Type Description Class Name Arguments
AlignCenter alignCenter Button Aligns the selected paragraph to the center new AlignCenter() new ToolCommandArgs(string commandName)
AlignJustify alignJustify Button Justifies the selected paragraph new AlignJustify() new ToolCommandArgs(string commandName)
AlignLeft alignLeft Button Aligns the selected paragraph to the left new AlignLeft() new ToolCommandArgs(string commandName)
AlignRight alignRight Button Aligns the selected paragraph to the right new AlignRight() new ToolCommandArgs(string commandName)
Format format DropDown Applies standard formatting to the selected text like Heading 1, Paragraph and so on new Format() new FormatCommandArgs(string commandName, string Value)
Indent indent Button Add indent to the selected text new Indent() new ToolCommandArgs(string commandName)
InsertImage insertImage Button Inserts image from a desired URL new InsertImage() new ImageCommandArgs(string src, string alt, string width, string height)
OrderedList insertOrderedList Button Creates a list of bullets from the selection new OrderedList() new ToolCommandArgs(string commandName)
Outdent outdent Button Remove indent from the selected text new Outdent() new ToolCommandArgs(string commandName)
Redo redo Button Repeats the last undone action new Redo() new ToolCommandArgs(string commandName)
ViewHtml setHtml Button Offers a HTML view for the selected text new ViewHtml() new HtmlCommandArgs(string commandName, string value)
Undo undo Button Undoes the last action new Undo() new ToolCommandArgs(string commandName)
UnorderedList insertUnorderedList Button Creates a list of bullets from the selection new UnorderedList() new ToolCommandArgs(string commandName)

Table Tools

The Table tools add an HTML <table> or control its rendering, like adding columns and rows, merging and splitting cells.

Table 3: Table tools in the Editor

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

Commands Without Built-in Tools

There are commands without built-in tools, but can be executed programmatically.

Table 4: Commands without tools in the Editor

Tool Name Command Name Tool Type Description Class Name Arguments
Clean Formatting cleanFormatting N/A Cleans the inline formatting of a selected text N/A new ToolCommandArgs(string commandName)
Insert HTML insertHtml N/A 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. There are separate commands for inserting links and images.		 N/A new HtmlCommandArgs(string commandName, string value, bool inline)

Programmatic Execution

You can invoke the built-in editor tools 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 tool you want to invoke.

Execute tools 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