Quill编辑器插入自定义HTML记录的示例详解_quill富文本资源-CSDN文库

183 浏览量 2020-11-19 21:41:28 上传评论收藏 212KB PDF 举报

资源推荐

资源详情

资源评论

Quill编辑器插入自定义编辑器插入自定义HTML记录的示例详解记录的示例详解

转眼已经2020年，饥渴的人类不再满足于简单的文本，于是有了花里胡哨的携带各种样式的文本，然而有文本还不够，我们

还需要让用户在编辑的时候，能够插入各种自定义消息类型，让我们发出去的软文更加好看，因此有了这篇文章。

前言

由于Quill编辑器自带的富文本过滤（大部分主流编辑器都会对富文本进行过滤处理），导致开发者想要配置自定义HTML模板

时，遇到了不少麻烦。

一、一、Quill渲染逻辑分析渲染逻辑分析

为了自定义Quill中的HTML块内容，首先需要了解Quill内部的渲染流程，这里有几个关键的概念需要了解：

1、Delta

Delta是Quill内部定义的一个数据格式，用于表示文档内容以及文档修改操作，易读且格式简单，通过Delta的形式来维护文档

内容，HTML内容和Delta两者可以相互转化。

举个例子：

这样一段富文本会被表示成以下的格式:

{

"ops":[

{"insert":"this is a simple text.\nbut when "},

{"attributes":{"bold":true},"insert":"it is "},

{"insert":"not bold.\nlet me try "},

{"attributes":{"italic":true},"insert":"italic "},

{"insert":"haha\nwhat about "}, {"attributes":

{"italic":true,"bold":true},"insert":"both"},

{"insert":" ?\n"} ] }"

普通的文本会被定义成一个个的insert动作，每一项代表这一个delta，都是对文本内容的描述。

类似的，如果修改和删除也会生成对应的delta，之后会将新生成的change delta，与原有的delta进行合并操作，生成新的

delta。（delta中一共包含三种操作：insert、delete、retain）

保留前10个字符，对后续的20个字符进行加粗操作的delta如下：

{

"ops": [

{ "retain": },

{ "retain": , "attributes": { "bold": } }

] }

保留前10个字符，对后续的20个字符进行删除操作如下：

{

"ops": [

{ "retain": },

{ "delete": }

] }

2、Parchment

Parchment是抽象的文档模型，对Blot进行管理。

将Parchment理解成完整的DOM树结构的话，那么Blot就是其中一个个单一的节点。而Blot去了Quill中默认的以外，还允许我

们进行自定义，给了更大的扩展空间。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38684976

粉丝: 4
资源: 950

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip