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中默认的以外，还允许我
们进行自定义，给了更大的扩展空间。
评论0