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
- thecommandName
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 theExecuteAsync
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));
}
}