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- thecommandNameof the tool for executing it programmatically.Tool Type- the type of the tool - whether it is a button or a dropdown. 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 theExecuteAsyncmethod 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) |
| 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) |
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 | Insert HTML to the Editor component content area at the cursor position. NOTE: this is a block command, so if you pass an inline element to it, it will be wrapped in a block element such as p or div, depending on the context. There are specific commands for creating links and images (two common inline elements). |
N/A | new HtmlCommandArgs(string commandName, string value) |
| Back Color | backColor | N/A | Change the background color of the selected text | N/A | new FormatCommandArgs(string commandName, string Value) |
| Fore Color | foreColor | N/A | Change the font color of a selected text | N/A | new FormatCommandArgs(string commandName, string Value) |
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>
<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 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));
}
}