内置工具

本文解释了哪些是Editor的内置工具和命令，如何以编程方式调用它们，以及它们提供了哪些功能。

如何使用这篇文章

本文描述了编辑器< em >工具而且< em >命令．

一个编辑< em >工具给定操作的可见接口。例如，加粗文本的按钮就是一个工具。内置工具可以呈现为按钮，颜色选择器或下拉列表。编辑器还支持带有自定义渲染的自定义工具．

一个编辑< em >命令是操作，它以某种方式修改HTML值。每个内置的编辑器工具都有一个相关的命令。自定义工具可以执行业务逻辑或调用内置命令。

关于编辑器工具和命令的信息组织在下面的表中。下面是表头的含义:

• 类名-用它来将该工具添加到编辑器工具栏

• 命令名-用它来以编程方式执行命令．在这种情况下，还可以使用论点列。

• 工具类型-工具可以是按钮,一个下拉列表中或者一个颜色选择器．这三种类型中的每一种都公开了一些定制选项。的示例颜色的工具，字体的工具和格式的工具．只有< em >按钮可以添加到工具组中的工具栏．

• 描述-关于工具和命令做什么的信息。

• ExecuteAsync参数-显示预期的类实例和必须传递给编辑器的参数ExecuteAsync方法以编程方式调用命令。

下面是一个简单的示例，演示如何使用类名、命令名和ExecuteAsync参数。

@using Telerik.Blazor.Components.Editor 在编辑器中插入段落   @code {private TelerikEditor EditorRef {get;设置;} private string EditorValue {get;设置;} = @"
foo
bar
";//“粗体”，“斜体”和“下划线”是类名private List EditorTools {get;设置;} = new List() {new Bold()， new Italic()， new Underline()};private async Task InsertParagraph() {// "insertHtml"是命令名// HtmlCommandArgs是ExecuteAsync参数await EditorRef. HtmlCommandArgs是ExecuteAsync参数ExecuteAsync(new HtmlCommandArgs("insertHtml"， $"
baz {DateTime.Now.Millisecond}
"));}}

内置工具和命令

• 内联的工具
  • 颜色工具定制
  • 字体工具定制
• 块工具
  • 格式工具定制
• 表工具
• 没有内置工具的命令
• 编程命令执行

内联的工具

内联工具添加或使用内联HTML元素。例如，这样的元素是<一>，< img >，< >强而且< em >．

颜色工具定制

的字体颜色而且写成BackgroundColor工具公开颜色属性，该属性接受颜色集合为IEnumerable <字符串>．您可以提供的成员ColorPalettePresets的自定义列表RGB(A)或HEX颜色在不同的支持格式．也可以通过更改工具提示标题．

@using Telerik.Blazor.Components.Editor   @code {private string EditorValue {get;设置;} private List EditorTools {get;设置;} = new List() {new ForeColor() {Title = "Text Color"， Colors = new List {"#f00"， "#ff9900"， "rgb(0,128,0)"， "rgba(0,0,255， .8)"}}， new BackgroundColor() {Title = "背景色"，Colors = ColorPalettePresets.}}， new BackgroundColor() {Title = "背景色"，Colors = ColorPalettePresets. {Basic}};｝

字体工具定制

的FontFamily而且字形大小工具有一个数据属性，它接受< EditorDropDownListItem列表>．使用它来定制这些下拉列表中的可用选项。你也可以通过改变下拉标签DefaultText．

@using Telerik.Blazor.Components.Editor   @code {private string EditorValue {get;设置;} private List EditorTools {get;设置;} =新列表< IEditorTool >(){新FontFamily () {DefaultText =“字体”,Data =新列表< EditorDropDownListItem >(){新EditorDropDownListItem(“格鲁吉亚”、“格鲁吉亚”),新EditorDropDownListItem(“明星控制台”、“明星控制台”)}},新字形大小(){DefaultText =“文字大小”,Data =新列表< EditorDropDownListItem >(){新EditorDropDownListItem(“小”,“12 px”),新EditorDropDownListItem(“媒介”、“16 px”),新EditorDropDownListItem(“大”、“24 px”)}}};｝

块工具

块工具添加或使用块HTML元素，例如<标题>，< h2 >，< p >而且< ul >．

下表中的所有工具都是< em >按钮,除了格式，这是一个< em >下拉．

格式工具定制

的格式工具公开数据财产它接受< EditorDropDownListItem列表>．使用它来减少或重新排列下拉列表中的项目。

@using Telerik.Blazor.Components.Editor   @code {private string EditorValue {get;设置;} private List EditorTools {get;设置;} = new List() {new Format() {Data = new List() {new EditorDropDownListItem("段落"，"p")， new EditorDropDownListItem("Heading 1"， "h1")}}};｝

表工具

表格工具创建和操作HTML<表>元素。这些工具可以添加或删除列和行，合并或分割单元格。

下表中的所有工具都是< em >按钮．

没有内置工具的命令

一些编辑器命令没有内置工具。这些命令只能是调用编程．

编程式的执行

您可以从组件外部或从自定义工具．

为了做到这一点，您需要使用编辑参考并调用ExecuteAsync方法．

使用上面的引用表查找要调用的命令的命令名及其参数。

@*点击按钮执行编辑器工具*@ @使用telerikk . blazor.components .Editor 插入hr 创建粗体文本 插入表格 插入图像 插入内线文本  @code{TelerikEditor TheEditor {get;设置;} string内容{get;设置;} = "
Lorem ipsum. "
Dolor sit meet .
";async任务插入thr(){等待编辑器。ExecuteAsync(new HtmlCommandArgs("insertHtml", "
")); } 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)); } }

另请参阅

• 编辑器概述
• 编辑器工具栏