Telerik UI for ASP.NET Core是用于跨平台响应式Web和云开发的最完整的UI工具集拥有超过60个由Kendo UI支持的ASP.NET核心组件。它的响应式和自适应的HTML5网格提供从过滤、排序数据到分页和分层数据分组等100多项高级功能。Telerik UI for ASP.NET Core的编辑器是一个多功能的所见即所得组件使开发者能创建、可视化和编辑HTML。它是一个相当复杂的组件具有多个内置功能。在本文中我们将重点介绍配置和定制编辑器的七种方法以便它更好地适应不同的用例。默认和自定义工具您可以通过只设置它的Name选项来初始化编辑器(Html.Kendo().Editor() .Name(editor) )即使没有额外的配置Editor也将具有完整的功能并将在其工具栏中显示一组默认工具。如果您想要添加更多的内置工具可以使用tools集合并列出希望组件显示的工具。在下面的代码片段中Pdf和Print被添加到Editor 的工具配置中。(Html.Kendo().Editor() .Name(editor) .Tools(tools { //list the tools... tools.Pdf(); tools.Print(); }) )注意这将在Editor默认显示的工具之后添加列出的工具。您可能想要删除默认工具而只显示在Tools配置中列出的工具只需要添加Clear工具然后列出想要的工具(Html.Kendo().Editor() .Name(editor) .Tools(tools { tools.Clear(); tools.Bold().Italic().Underline().Strikethrough(); tools.Pdf(); tools.Print(); }) )Custom定制工具也可以通过CustomButton选项添加到工具栏中下面的示例展示了如何包含一个自定义工具该工具可以在Editor的内容中添加一条水平线(hr /)。(Html.Kendo().Editor() .Name(editor) .Tools(tools tools .CustomButton(cb cb.Name(custom).ToolTip(Insert a horizontal rule).Exec(text function(e) { var editor $(#editor).data(kendoEditor); editor.exec(insertHtml, { value: hr / }); } /text)) ) )CustomButton工具有一个Exec选项允许您附加一个处理程序可以在其中执行自定义逻辑。在这种情况下逻辑使用Editor的API来插入一条水平规则。样式化编辑器的内容编辑器在iframe中呈现其内容因此添加到视图中的自定义CSS不能以内容为目标。ditor提供了将样式表导入iframe的选项这允许您自定义内容中呈现的HTML的外观。让我们来看一个例子。我们想要一个更大字体大小的文本在编辑器的内容中而且无序列表的图标应该是红色的。1. 首先将在项目中添加一个样式表其名称和位置如下Content/Editor/editorStyles.css。在样式表中我们将添加一些自定义CSS规则并更改想要的字体大小和图标颜色。body { font-size: 16px; } li::marker { color: red; }2. 接下来我们在编辑器中设置样式表配置并指向在上一步中添加到项目中的样式表文件(Html.Kendo().Editor() .Name(editor) .StyleSheets(css css .Add(Url.Content(~/Content/Editor/editorStyles.css)) ) .Value(text ul liList item 1/li liList item 2/li liList item 3/li /ul /text) )除了设置样式表配置之外我们还传递了一个典型的无序列表作为组件的值。3. 下面的屏幕截图演示了结果。添加到editorStyles.css样式表中的两个CSS规则都生效了列表项文本的字体大小为16px项目符号为红色。新行选项当鼠标插入符号位于编辑器中的一行文本上并按Enter键时编辑器将创建一个新行。默认情况下新行被换行到段落(p)元素中一种可能的替代方法是Editor插入换行符(br)元素来替代段落。没有配置选项允许您在Editor的声明中切换此操作但可以通过几行JavaScript实现。方法如下script var defaultTools kendo.ui.Editor.defaultTools; defaultTools[insertLineBreak].options.shift false; delete defaultTools[insertParagraph].options; /script (Html.Kendo().Editor() .Name(editor) )SnippetsSnippets是一种特殊类型的工具您可以在编辑器工具集合中配置它它能在Editor的内容中快速添加预定义的HTML片段。在涉及添加不会更改的内容的场景中特别是当用户必须多次添加内容或添加一组重复的HTML片段时它很有帮助。在下面的示例中我们包含了两个片段第一个包含图像的HTML(例如公司徽标)第二个包含示例签名的HTML。(Html.Kendo().Editor() .Name(editor) .Tools(tools tools .Snippets(snippets snippets .Add(Logo, img loadinglazy srchttps://demos.telerik.com/aspnet-core/shared/images/site/devcraft-ninja-small.svg altdevcraft ninja image) .Add(Signature, pRegards,br / John Doe,br /a hrefmailto:john.doeexample.comjohn.doeexample.com/a/p) ) ) .HtmlAttributes(new { style height:300px }) )下面的截图显示了添加的图像和签名用户不需要输入HTML 在Insert HTML工具的下拉菜单中选择相应的选项时它会自动添加。编码当您将Editor的值提交给服务器时在表单中使用它会注意到默认情况下该值中的HTML标记被编码发送给服务器Encode选项启用/禁用值的编码。让我们看看它们的区别(Html.Kendo().Editor() .Name(editor) .Value(psome text/p) )上面的Editor启用了编码(默认情况下)它的值将以编码方式提交lt;pgt;some textlt;/pgt;如果您不希望该值以编码的方式提交请禁用Encode选项(Html.Kendo().Editor() .Name(editor) .Encode(false) .Value(psome text/p) )如果禁用编码则该值将以未编码的方式提交psome text/p不变的元素某些用例可能需要限制用户编辑文档部分内容的能力不可变元素特性可以帮助您完成这项任务。启用Immutables选项并声明编辑器的内容(Html.Kendo().Editor() .Name(editor) .Immutables(true) .Value(text div contenteditablefalse stylebackground-color: lightgray h3Company Name/h3 (immutable content) /div divYou can edit the content of this div element/div /text) )为了防止用户编辑特定元素的内容将它们的contentitable DOM属性设置为false。在上面的例子中第一个div元素的内容是不可编辑的。PDF导出选项在默认和自定义工具部分我们将PDF导出工具添加到编辑器的工具栏中。Editor在其根级别上有一个专用的PDF配置它允许进一步定制导出的PDF文档。(Html.Kendo().Editor() .Name(editor) .Tools(tools { tools.Pdf(); }) .Value(a hrefhttps://www.telerik.comVisit telerik.com!/a ) .Pdf(pdf pdf .Author(John Doe) .Title(My Pdf Document) .Margin(20, 20, 20, 20) .PaperSize(A4) .JpegQuality(1) .AvoidLinks(false) .ForceProxy(true) .ProxyURL(Url.Action(Pdf_Export_Save, Home)) ) )以下是您可以配置的一些PDF相关选项Author和Title在生成的PDF文档中使用相同的名称设置属性。Margin指定上、右、下和左边距该选项接受字符串或双精度值。PaperSize默认设置为“auto”这意味着纸张大小将由导出内容的大小决定但您可以配置一个预定义的大小值如“A4”或“A3”。如果您想增加或减少导出文档中的图像质量JpegQuality是一个可以设置的有用选项。它接受从0到1的值默认质量为0.92。启用AvoidLinks选项可确保在编辑器内容中工作的链接不会被导出为PDF文档中的实际工作链接。ForceProxy和ProxyURL选项通常一起使用。后者用于指定负责在服务器上保存PDF文件的服务器端代理的URL前者确保内容将被发送到代理URL即使浏览器支持本地保存文件。现代浏览器支持本地保存文件这是Editor使用的默认保存文件的方式因此要强制服务器导出请设置这两个选项。这是编辑器的一些自定义选项的峰值该组件具有多个特性和HTML编辑功能以及可以探索和利用的广泛API来实现所需的场景。