7种方法!教你如何使用Telerik UI for ASP.NET定制编辑器

news2024/11/25 19:12:34

Telerik UI for ASP.NET Core是用于跨平台响应式Web和云开发的最完整的UI工具集,拥有超过60个由Kendo UI支持的ASP.NET核心组件。它的响应式和自适应的HTML5网格,提供从过滤、排序数据到分页和分层数据分组等100多项高级功能。

Telerik UI for ASP.NET Core的编辑器是一个多功能的所见即所得组件,使开发者能创建、可视化和编辑HTML。它是一个相当复杂的组件,具有多个内置功能。

在本文中,我们将重点介绍配置和定制编辑器的七种方法,以便它更好地适应不同的用例。

获取Telerik UI for ASP.NET Core 新版下载(Q技术交流:726377843)

默认和自定义工具

您可以通过只设置它的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来插入一条水平规则。

7种方法!教你如何使用Telerik UI for ASP.NET定制编辑器

样式化编辑器的内容

编辑器在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>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</text>)
)

除了设置样式表配置之外,我们还传递了一个典型的无序列表作为组件的值。

3. 下面的屏幕截图演示了结果。

7种方法!教你如何使用Telerik UI for ASP.NET定制编辑器

添加到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")
)
Snippets

Snippets是一种特殊类型的工具,您可以在编辑器工具集合中配置它,它能在Editor的内容中快速添加预定义的HTML片段。在涉及添加不会更改的内容的场景中,特别是当用户必须多次添加内容或添加一组重复的HTML片段时,它很有帮助。

在下面的示例中,我们包含了两个片段:第一个包含图像的HTML(例如,公司徽标),第二个包含示例签名的HTML。

@(Html.Kendo().Editor()
.Name("editor")
.Tools(tools => tools
.Snippets(snippets => snippets
.Add("Logo", "<img loading='lazy' src='https://demos.telerik.com/aspnet-core/shared/images/site/devcraft-ninja-small.svg' alt='devcraft ninja image'>")
.Add("Signature", "<p>Regards,<br /> John Doe,<br /><a href='mailto:john.doe@example.com'>john.doe@example.com</a></p>")
)
)

.HtmlAttributes(new { style = "height:300px" })
)

下面的截图显示了添加的图像和签名,用户不需要输入HTML, 在Insert HTML工具的下拉菜单中选择相应的选项时,它会自动添加。

7种方法!教你如何使用Telerik UI for ASP.NET定制编辑器

编码

当您将Editor的值提交给服务器时,在表单中使用它会注意到默认情况下,该值中的HTML标记被编码发送给服务器,Encode选项启用/禁用值的编码。让我们看看它们的区别:

@(Html.Kendo().Editor()
.Name("editor")
.Value("<p>some text</p>")
)

上面的Editor启用了编码(默认情况下),它的值将以编码方式提交:&lt;p&gt;some text&lt;/p&gt;

如果您不希望该值以编码的方式提交,请禁用Encode选项:

@(Html.Kendo().Editor()
.Name("editor")
.Encode(false)
.Value("<p>some text</p>")
)

如果禁用编码,则该值将以未编码的方式提交:<p>some text</p>

不变的元素

某些用例可能需要限制用户编辑文档部分内容的能力,不可变元素特性可以帮助您完成这项任务。

启用Immutables选项并声明编辑器的内容:

@(Html.Kendo().Editor()
.Name("editor")
.Immutables(true)
.Value(@<text>
<div contenteditable="false" style="background-color: lightgray">
<h3>Company Name</h3>
(immutable content)
</div>
<div>You 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 href='https://www.telerik.com'>Visit 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,来实现所需的场景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/819367.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

自己动手从零写桌面操作系统GrapeOS——4.1 在VirtualBox中安装CentOS

之前讲解开发环境时并没有介绍具体的安装过程&#xff0c;有网友反应CentOS的安装配置有问题&#xff0c;尤其是共享文件夹。本讲我们就来补充介绍一下在VirtualBox中安装配置CentOS的具体过程&#xff0c;彻底解决GrapeOS开发环境问题。 一、新建虚拟机 1.在VirtulBox中点击…

电脑主机启动不起来怎么回事?2023最新解决方法!

“我的电脑刚用才没多久&#xff0c;怎么主机突然就启动不起来了呢&#xff1f;试了很多方法还是不行&#xff0c;这我该怎么解决呀&#xff1f;” 在日常的学习和工作中&#xff0c;大多数人已经离不开电脑了。当然&#xff0c;在使用电脑的过程中&#xff0c;会遇到各种各样…

[Docker]入门之docker-compose

一&#xff0c;Docker-compose简介 1&#xff0c;Docker-compose简介 Docker-Compose项目是Docker官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 Docker-Compose将所管理的容器分为三层&#xff0c;分别是工程&#xff08;project&#xff09;&#xff0c…

Qt使用QQuickWidget的输入法问题(Qt5.12及以前)

Qt使用QQuickWidget的输入法问题&#xff08;Qt5.12及以前&#xff09; 最近有网友表示&#xff0c;在使用QQuickWidget嵌入到QWidget时&#xff0c;QML内部的输入法会有问题。 主要表现是&#xff0c;当焦点从QWidget&#xff08;比如QLineEdit&#xff09;切换到QQuickWidg…

Spring学习笔记——1

Spring学习笔记——1 一、Spring入门1.1、学习路线1.2、传统Javaweb开发困惑及解决方法1.3、三种思想的提出和框架概念1.3.1、IoC、DI和AOP思想提出1.3.2、框架的基本特点 1.4、Spring概述1.5、BeanFactory快速入门1.6、ApplicationContext快速入门1.7、BeanFactory与Applicati…

复习第四章集合+多线程

一、集合 Collection派生 我们在使用集合的时候其实更多的是使用List、Set、Map集合进行操作&#xff0c;List、Set又继承自Collection Collection下的集合为单列集合&#xff0c;可以理解为一个集合当中的数据只代表一个“对象”。 Map派生 Map代表的是存储key-value对的集…

为高性能计算构建,由亚马逊云科技Amazon Graviton3E驱动的最新实例正式可用

亚马逊云科技宣布两款基于最新一代自研芯片Amazon Graviton3E的新实例Amazon Elastic Compute Cloud&#xff08;Amazon EC2&#xff09;Hpc7g和Amazon EC2 C7gn正式可用。 其中&#xff0c;Hpc7g实例专为计算和网络密集型高性能计算&#xff08;HPC&#xff09;工作负载而构建…

K8s安全配置:CIS基准与kube-bench工具

01、概述 K8s集群往往会因为配置不当导致存在入侵风险&#xff0c;如K8S组件的未授权访问、容器逃逸和横向攻击等。为了保护K8s集群的安全&#xff0c;我们必须仔细检查安全配置。 CIS Kubernetes基准提供了集群安全配置的最佳实践&#xff0c;主要聚焦在两个方面&#xff1a;主…

axios 网络应用 axios基本使用

之前学了vue本地应用&#xff0c;通过Vue提供的各种指令&#xff0c;对本地的数据进行操作。 但是现在很少有纯本地的应用了&#xff0c;或多或少都会进行网络数据的交互。这个就想要axios&#xff0c;内部是阿贾克斯&#xff0c;封装之后使用起来更加便捷&#xff0c;并且功能…

【Java练习题汇总】《第一行代码JAVA》综合测试一,汇总Java练习题

Java练习题 综合测试一 1️⃣ 综合测试一 1️⃣ 综合测试一 下面关于Java 的特点不正确的一项是( )。 A. Java 具备跨平台性&#xff0c;可以在任意的操作系统间进行移植 B. Java 编写的程序可以直接解释执行&#xff0c;属于解释型的编程语言类型 C. Java 中具备垃圾收集机制…

Linux安装VScode

从本篇开始&#xff0c;打算有时间就写写在VScode中编写一些ros相关的案例程序用于学习记录。本篇是如何在Linux安装VScode的第一篇。 一、下载VScode 在Linux中打开浏览器输入&#xff1a;https://code.visualstudio.com/Download&#xff0c;选择与你电脑相匹配的版本下载&…

java版本spring cloud 企业工程系统管理 工程项目管理系统源码

&#xfeff; Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下&#xff1a; 首页 工作台&#xff1a;待办工作、消息通知、预警信息&#xff0c;点击可进入相应的列表 项目进度图表&#xff1a;选择&#xff08;总体或单个&…

浅谈Java转义符\|

浅谈Java转义符\| 看一段程序 String t "a||b||c||d"; String[] temp t.split("\\|\\|"); System.out.println(temp.length); 主要是&#xff1a;"\\|\\|" 代表什么意思&#xff1f; 开始有点蒙&#xff0c;后来仔细一看明白了&#xff0…

易基因:单细胞DNA甲基化与转录组分析揭示猪生发泡卵母细胞成熟的关键调控机制|项目文章

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 在哺乳动物中&#xff0c;窦卵泡内的生发泡(germinal vesicle&#xff0c;GV) 卵母细胞可以保持数月或数年的静止状态。促黄体生成素(luteinizing hormone&#xff0c;LH)激增促进了减数…

740.删除并获得点数

目录 一、题目 二、代码 一、题目 740. 删除并获得点数 - 力扣&#xff08;LeetCode&#xff09; 二、代码 转换成打家劫舍问题 class Solution { public:int deleteAndEarn(vector<int>& nums) {int Max nums[0];//nums中的最大点数for(int i0;i<nums.size(…

iTOP-RK3588开发板Debian系统使用 VNC 远程控制桌面-客户端连接

在 360 软件管家里面下载 VNC Viewer 软件&#xff0c;如下图所示&#xff1a; 然后打开软件&#xff0c;之后如下图所示&#xff1a; 然后我们点击左上角 file-》New connection&#xff0c;如下图所示设置&#xff0c;我们的 VNC Server 设为 192.168.1.14:1&#xff0c;其中…

柴洪峰院士:大模型赋能金融科技思考与展望

本文整理自7月7日世界人工智能大会“AI生成与垂直大语言模型的无限魅力”论坛上中国工程院院士、复旦大学金融科技研究院院长柴洪峰《大模型赋能金融科技思考与展望》的主题分享&#xff0c;从金融垂直模型构建、金融知识图谱与大模型融合以及金融大模型的监管三个方面进行介绍…

大数据Flink(五十五):Flink架构体系

文章目录 Flink架构体系 一、 Flink中的重要角色 二、Flink数据流编程模型 三、Libraries支持

风辞远的科技茶屋:来自未来的信号枪

很久之前&#xff0c;有位朋友问我&#xff0c;现在科技资讯这么发达了&#xff0c;你们还写啊写做什么呢&#xff1f; 我是这么看的。最终能够凝结为资讯的那个新闻点&#xff0c;其实是一系列事情最终得出的结果&#xff0c;而这个结果又会带来更多新的结果。其中这些“得出”…

Ae 效果:CC Kernel

颜色校正/CC Kernel Color Correction/CC Kernel CC Kernel&#xff08;CC 卷积核&#xff09;效果主要用于图像的卷积处理&#xff0c;通过在卷积矩阵中设置不同的权重值&#xff0c;可以实现图像的锐化 Sharpen、模糊 Blur、查找边缘 Find Edges以及浮雕 Emboss等效果。 ◆ …