Editor Toolbar
The toolbar of the editor is where it command buttons reside and they let the end user apply various formatting and styling - from bold and italic words, to creating lists, tables, inserting images or custom tools you can define.
This article contains the following sections:
Basics
The Editor tools and commands are in the Telerik.Blazor.Components.Editor namespace. If you will be applying settings related to the tools (such as choosing a different built-in toolset or adding custom tools), you should add an using statement for this namespace.
To control the collection of buttons and commands available to the user, you provide the desired collection to the Tools parameter of the editor, which takes a List<IEditorTool>.
Built-in Tool Lists
The Editor comes with two predefined sets of tools in the EditorToolSets static class:
-
Defaultincludes the most commonly used tools and commands. If you do not apply any settings, theDefaultlist of tools will be used. -
Allincludes all the available tools and commands.
The following example shows how to use the All toolset.
Use all built-in Editor tools
@using Telerik.Blazor.Components.Editor
<TelerikEditor @bind-Value="@EditorValue"
Tools="@EditorToolSets.All">
</TelerikEditor>
@code {
private string EditorValue { get; set; } = string.Empty;
}
Predefined Toolset Configurations
The following code snippets show the built-in toolset configurations in EditorToolSets. See the Built-in Editor Tools article for more information on each tool.
public static List<IEditorTool> Default = new List<IEditorTool>()
{
new EditorButtonGroup(new Bold(), new Italic(), new Underline()),
new Format(),
new EditorButtonGroup(new AlignLeft(), new AlignCenter(), new AlignRight(), new AlignJustify()),
new EditorButtonGroup(new UnorderedList(), new OrderedList(), new Indent(), new Outdent()),
new EditorButtonGroup(new CreateLink(), new Unlink()),
new InsertImage()
};
public static List<IEditorTool> All = new List<IEditorTool>()
{
new EditorButtonGroup(new Undo(), new Redo()),
new EditorButtonGroup(new Bold(), new Italic(), new Underline(), new Strikethrough()),
new EditorButtonGroup(new SubScript(), new SuperScript()),
new Format(),
new FontFamily(),
new FontSize(),
new ForeColor(),
new BackgroundColor(),
new EditorButtonGroup(new AlignLeft(), new AlignCenter(), new AlignRight(), new AlignJustify()),
new EditorButtonGroup(new UnorderedList(), new OrderedList(), new Indent(), new Outdent()),
new EditorButtonGroup(new CreateLink(), new Unlink()),
new InsertImage(),
new InsertTable(),
new EditorButtonGroup(new AddColumnBefore(), new AddColumnAfter(), new AddRowBefore(), new AddRowAfter()),
new EditorButtonGroup(new DeleteColumn(), new DeleteRow(), new DeleteTable()),
new EditorButtonGroup(new MergeCells(), new SplitCell()),
new ViewHtml()
};
Choose Toolbar Items
To define your own customized collection of tools, you use the Tools parameter of the Editor component and populate it with the commands you want available. They can include custom tools.
The Tools collection is a List<IEditorTool>.
Editor tools can be individual buttons (such as Undo, Bold), dropdowns (such as Format or FontSize), and button groups that hold several buttons.
To add a button, add a new <Command>() where Command is the name of the tool from this table. The VS Intellisense can also show you the classes in the Telerik.Blazor.Components.Editor. namespace.
To define a button group, add a new EditorButtonGroup(comma-separated collection of button commands).
Button groups can take only buttons, and dropdowns and custom tools cannot be added to them.
Examples:
Add/Remove Tools From Existing Toolbar
This example shows how to start from the existing Default toolbar collection of the editor and to modify it to:
- add Undo and Redo to the beginning, in their own tool group;
- add Supercript tool to the Bold, Italic, Underline group;
- Remove the Format tool;
- add ViewHtml at the end, in its own toolgroup.
Modify the Default toolset
@using Telerik.Blazor.Components.Editor
@* Avoid ambiguous reference with SVG icons *@
@using EditorNS = Telerik.Blazor.Components.Editor;
<TelerikEditor Tools="@customTools" @bind-Value="@TheEditorValue"></TelerikEditor>
@code {
string TheEditorValue { get; set; } = "<p>Lorem ipsum</p><p>Dolor sit amet.</p>";
public List<IEditorTool> customTools { get; set; }
protected override void OnInitialized()
{
// start with the default set of tools as base
// alternatively, you can create a new list and populate it from scratch
customTools = new List<IEditorTool>(EditorToolSets.Default);
// create a tool group
var UndoRedoGroup = new EditorButtonGroup(
new EditorNS.Undo(), // add individual tools to the group
new EditorNS.Redo()
);
// add the toolgroup to the beginning of the toolbar definition
customTools.Insert(0, UndoRedoGroup);
// add to an existing toolgroup
EditorButtonGroup targetGroup = customTools[1] as EditorButtonGroup;
if (targetGroup != null) // make sure it's a group and not an individual button
{
targetGroup.Tools.Add(new SuperScript());
}
// remove an existing tool
customTools.RemoveAt(2);
// add an individual tool that will form its own tool group at the end of the toolbar
customTools.Add(new ViewHtml());
base.OnInitialized();
}
}
Create a Toolbar From Scratch
This example shows how you can keep adding tools to the toolbar to get the desired collection.
Create your own toolbar
@using Telerik.Blazor.Components.Editor
@* Avoid ambiguous reference with SVG icons *@
@using EditorNS = Telerik.Blazor.Components.Editor;
<TelerikEditor Tools="@MyTools" @bind-Value="@TheEditorValue"></TelerikEditor>
@code {
string TheEditorValue { get; set; } = "<p>Lorem ipsum</p><p>Dolor sit amet.</p>";
public List<IEditorTool> MyTools { get; set; }
protected override void OnInitialized()
{
// initialize the toolbar collection
MyTools = new List<IEditorTool>();
// add a button group
EditorButtonGroup firstGroup = new EditorButtonGroup(
new EditorNS.Bold(),
new EditorNS.Italic(),
new EditorNS.Underline()
);
MyTools.Add(firstGroup);
// add a dropdown
MyTools.Add(new Format());
// add a standalone tool
MyTools.Add(new ViewHtml());
base.OnInitialized();
}
}
Customize Built-in Tools
When adding a built-in tool to the collection, you can set various parameters to it, such as Class, Icon, Title for buttons; DefaultText or a customized Data collection for dropdowns. The tools have default values, and you can alter them. You also have access to the default Data collections of the drodown tools through the EditorDropDownListToolItems static class.
Customize the default values of the built-in tools - tooltips, available items, class and appearance
@using Telerik.Blazor.Components.Editor
@* Avoid ambiguous reference with SVG icons *@
@using EditorNS = Telerik.Blazor.Components.Editor;
<TelerikEditor Tools="@MyTools" @bind-Value="@TheEditorValue"></TelerikEditor>
@code {
string TheEditorValue { get; set; } = "<p>Lorem ipsum</p><p>Dolor sit amet.</p>";
public List<IEditorTool> MyTools { get; set; }
protected override void OnInitialized()
{
// initialize the toolbar collection
MyTools = new List<IEditorTool>();
// add a button group
EditorButtonGroup firstGroup = new EditorButtonGroup(
new EditorNS.Bold(),
new EditorNS.Italic(),
// this is how to customize settings for a button. Intellisense will show you all the options
// you should avoid customizing things like OnClick event handlers and CommandName
new EditorNS.Underline()
{
Title = "My Custom Underline Title",
Class = "special-underine",
Icon = SvgIcon.Gear,
}
);
MyTools.Add(firstGroup);
// this is how to customize settings for a dropdown. Intellisense will show you all the options
// you should avoid customizing things like event handlers, and CommandName
MyTools.Add(new Format()
{
DefaultText = "Choose Style",
Width = "200px",
Data = new List<EditorDropDownListItem>
{
new EditorDropDownListItem { Text = "heading", Value = "h1" },
new EditorDropDownListItem { Text = "separated block", Value = "blockquote" },
}
});
// this is how you can get the default data sources - in this example, the font size
// the EditorDropDownListToolItems static class holds the appropriate default collections
List<EditorDropDownListItem> fontSizeChoices = EditorDropDownListToolItems.FontSizeItems.Skip(4).Take(3).ToList();
MyTools.Add(new EditorNS.FontSize() { Data = fontSizeChoices });
// add the View Html so we can easily inspect the results
MyTools.Add(new ViewHtml());
base.OnInitialized();
}
}
<style>
.special-underine.k-button {
background: green;
background-image: none;
}
</style>