编辑器工具栏

编辑器的工具栏是命令按钮所在的位置，它们允许最终用户应用各种格式和样式——从粗体和斜体文字，到创建列表、表格、插入图像或自定义工具你可以定义。

本文包含以下部分:

• 基础知识
• 内置工具列表
• 选择工具栏项
  • 从现有工具栏中添加/删除工具
  • 从头开始创建工具栏
  • 自定义内置工具

基础知识

编辑器工具和命令位于Telerik.Blazor.Components.Editor名称空间。如果要应用与工具相关的设置(例如选择不同的内置工具集或添加自定义工具)，则应该添加一个使用语句。

控件提供所需的集合，以控制用户可用的按钮和命令的集合工具编辑器的参数，该参数取a< IEditorTool列表>．

内置工具列表

工具中附带了两组预定义的工具EditorToolSets静态类:

• 默认的-最常用的工具和命令的默认集。
• 所有-编辑器拥有的所有可用工具和命令。

如果不应用任何设置，则默认的将使用的工具清单。

@using Telerik.Blazor.Components.Editor  < / TelerikEditor >

选择工具栏项

要定义自己的自定义工具集合，可以使用工具参数，并使用您希望可用的命令填充它。它们包括自定义工具．

的工具收藏是一个< IEditorTool列表>．

编辑器工具可以是单独的按钮(如撤销、粗体)、下拉菜单(如格式或FontSize)，以及包含多个按钮的按钮组。

若要添加按钮，请添加新的命令< > ()在哪里命令工具的名称来自哪里这个表．VS智能感知也可以向你显示类Telerik.Blazor.Components.Editor。名称空间。

要定义按钮组，请添加new EditorButtonGroup(以逗号分隔的按钮命令集合)．

按钮组只能包含按钮，不能向其中添加下拉菜单和自定义工具。

• 从现有工具栏中添加/删除工具
• 从头开始创建工具栏
• 自定义内置工具

从现有工具栏中添加/删除工具

这个例子展示了如何从现有的开始默认的工具栏集合的编辑器，并将其修改为:

• 将撤销和重做添加到开始，在各自的工具组中;
• 添加上标工具到粗体，斜体，下划线组;
• 删除格式工具;
• 在它自己的工具组中添加ViewHtml。

@using Telerik.Blazor.Components.Editor  @code{string TheEditorValue {get;设置;} = "
Lorem ipsum
Dolor sit met.
";public List customTools {get;设置;} protected override void OnInitialized(){//以默认的工具集作为基础//或者，您可以创建一个新的列表并从头开始填充customTools = new list (EditorToolSets.Default);//创建一个工具组var UndoRedoGroup = new EditorButtonGroup(new Undo()， //添加单个工具到组new Redo());//添加工具组到工具栏定义customTools的开头。插入(0,UndoRedoGroup);//添加到现有的工具组EditorButtonGroup targetGroup = customTools[1] as EditorButtonGroup;if (targetGroup != null) //确保它是一个组，而不是一个单独的按钮。添加(新上标()); } // 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(); } }

从头开始创建工具栏

这个示例展示了如何不断向工具栏添加工具以获得所需的集合。

@using Telerik.Blazor.Components.Editor  @code{string TheEditorValue {get;设置;} = "
Lorem ipsum
Dolor sit met.
";public List MyTools {get;设置;} protected override void OnInitialized(){//初始化工具栏集合MyTools = new List();//添加按钮组EditorButtonGroup firstGroup = new EditorButtonGroup(new Bold()， new Italic()， new Underline());MyTools.Add(趟列车);//添加下拉MyTools。添加(新格式());//添加一个独立的工具MyTools。添加(新ViewHtml ()); base.OnInitialized(); } }

自定义内置工具

向集合添加内置工具时，可以为其设置各种参数，例如类，图标，标题按钮;DefaultText或者是定制的数据收集下拉列表。这些工具有默认值，您可以更改它们。您还可以访问默认设置数据集合的下拉工具通过EditorDropDownListToolItems静态类。

@using Telerik.Blazor.Components.Editor  @code{string TheEditorValue {get;设置;} = "
Lorem ipsum
Dolor sit met.
";public List MyTools {get;设置;} protected override void OnInitialized(){//初始化工具栏集合MyTools = new List();//添加按钮组EditorButtonGroup firstGroup = new EditorButtonGroup(new Bold()， new Italic())， //这是如何自定义一个按钮的设置。智能感知将显示你所有的选项//你应该避免自定义的东西，如OnClick事件处理程序和CommandName新下划线(){Title = "我的自定义下划线标题"，Class = "special-underine"， Icon = "gear"，});MyTools.Add(趟列车);这是如何自定义下拉菜单的设置。 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 { 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 fontSizeChoices = EditorDropDownListToolItems.FontSizeItems.Skip(4).Take(3).ToList(); MyTools.Add(new FontSize() { Data = fontSizeChoices }); // add the View Html so we can easily inspect the results MyTools.Add(new ViewHtml()); base.OnInitialized(); } } 

另请参阅

• 编辑器概述