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":"hahanwhat 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、Blot

Blot是Parchment文档的构成部门，相等于对DOM节点范例的抽象，而一个详细的Blot实例里仍有其他的节点信息。

全局的根节点Blot是由Quill内部自界说的Scroll范例Blot，打点其下面的全部Blot。

对付Blot的实现界说可以参照这里： https://github.com/quilljs/parchment#blots

Quill中默认界说的Blot如下：

这个中常见的包罗TextBlot（行内平凡文本）、Inline（行内携带样式的平凡文本）、Block（块级行，一样平常以段落p为单元）、Break（换行）、Image（图片IMG插入）、Bold（加粗文本）。

而一段HTML怎样构建出Blot？Quill中会按照节点范例优先解除文本节点，假如是元素节点会按照节点的ClassName举办再次判定，假如如故无法找到匹配的BlotName，则默认匹配以下的映射相关，来找到对应的BlotClass。

4、Delta的现实意义

既然已经有Blot可以来暗示我们的内容布局了，为什么还必要Delta？Delta自己只是一份内容数据的维护，也就是说HTML的更新，无论是用户输入，照旧API操纵，城市同步更新到Delta中，而Delta假如不作为HTML的数据源的话，那么维护一份Delta数据的意义又在那边？

假如HTML => Delta，而不存在Delta=>HTML，那么不断地去维护一份delta的意义是什么？

1、由Delta天生HTML着实是存在的，只不外应用场景只限于初始化文档的时辰，Quill会对传入的初始化HTML字符串举办理会处理赏罚，天生对应的Delta，其次通过applyDelta的方法，天生DOM节点回显与页面中。

2、看到这里你也许还不满足，为啥非要走这一步流程，初始化的时辰直接一段字符串document.getElementById('container').innerHTML = val不可吗，是的，可以，可是Delta的存在让用户的文档变得粒度更微小，变得易维护，变得可追溯。若是A和B同时编辑着一份文档，A删除了第二行的10个字符，不必要将文档内容全量更新，只必要提交action操纵，同步本身的举动，而B这边也只必要举办斗嘴处理赏罚后merge即可。固然Delta的维护让逻辑变得伟大了不少，但它的存在也让文档有了更多扩展的也许。

5、编辑器渲染与更新流程

对付内容的修改一共有以下3种方法：

1、初始化编辑器内容：初始化挪用quill.pasteHTML，颠末HTML过滤息争析回显到编辑框中。

2、Input Event：用户输入和编辑操纵，通过MutationObserver监听处理赏罚，更新delta。

3、API挪用：挪用内部提供API，通过modify要领，尔后挪用全局Scroll实例的要领去修改。

二、插入自界说HTML块

因为文章内容越来越多样化，在文章插入舆图、音乐播放器、告白面板等需求的存在，让我们必要对富文本编辑器扩展出更多的成果。可是同时也要做好xss防护进攻。

凭证第一部门的报告，我们必要插入一个自界说HTML块，同时又要Quill可以或许辨认，智慧的你必然想到了，我们必要自界说一个Blot。通过界说好Blot的方法，让Quill在初始化的时辰可以或许辨认我们的HTML块展示，同时也让我们在插入HTML块的时辰不会被Quill举办脏HTML过滤。

注册Blot要领如下：

export default function (Quill) {
  // 引入源码中的BlockEmbed
  const BlockEmbed = Quill.import('blots/block/embed');
  // 界说新的blot范例
  class AppPanelEmbed extends BlockEmbed {
    static create(value) {
      const node = super.create(value);
      node.setAttribute('contenteditable', 'false');
      node.setAttribute('width', '100%');
      //   配置自界说html
      node.innerHTML = this.transformValue(value)
      return node;
    }

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!