这篇文章中的很多内容都来自 Adam Charron 的 《Getting to know QuillJS - Part 1》 中，文中结合了我自己的一些理解和经验，内容也做了些调整，希望能帮到准备使用quilljs的你。

quilljs是一个现代富文本编辑器，它具备良好的兼容性及强大的可扩展性。用户可以非常方便地实现自定义功能。另一特点是，quilljs自带一套数据系统来支撑内容生产， Parchment 和 Delta 。

const delta = new Delta().retain(12)
	.delete(4)
	.insert('White', { color: '#fff' });
 
retain(12) 表示保留编辑器中索引为0 - 12之间的blots;
delete(4) 表示接上一个操作后，删除4个blots;
insert('white', { color: '#fff' }) 表示接上一次操作后，插入文字'white', 并对其应用format 'color', #fff'
 
 
通过编辑器的方法getContents可以获取当前编辑器中的内容的delta数据：
 
 
Blot是Parchment文档的组成部分，它是quilljs中最重要的抽象。有了Blot，可以让用户对编辑器中的内容进行操作，而无需对DOM进行直接操作。每一种Blot都需要实现blot接口规范，quill中的内置Blot都继承自ShadowBlot。
为了方便查找与blot相关的其他blot，所以每个blot都拥有以下这些引用属性：
 
 
.parent—父级blot，包含当前blot。若当前blot是顶级blot，则为null。
.prev—上一个同级blot, 与当前blot拥有同一个parent, 若当前blot为第一个child，则为null。
.next—下一个同级blot, 与当前blot拥有同一个parent, 若当前blot为最后一个child，则为null。
.scroll—顶级blot，后面会提供更多关于scroll blot的信息。
.domNode—当前blot的DOM结构，该blot在DOM树中的实际结构。
 
 
Blot生命周期
 
 
Blot主要通过调用Patchment.create()创建。Blot拥有几个生命周期方法，你可以通过使用同名方法去覆盖它们，并根据具体情况在你的逻辑代码中通过super去调用被你覆盖的方法，以保证blot的默认行为不被破坏。下面继续介绍这些生命周期方法： 
 
 
Blot.create()
 
 
每一个Blot都有static create()函数，用于根据初始值创建DOM Node。这里也非常适合在node上设置一些与Blot实例无关的初始属性。该函数会返回新创建的DOM Node，但并未插入文档中。此时，Blot也还未实例化成功，因为Blot实例化需要依赖DOM Node。需要注意的是，create()并不是任何时候都会在blot实例化前执行，例如：当用户通过 复制/粘贴 创建blot时，blot的创建会直接接受来自剪切板的HTML结构，从而跳过create方法。
 
 
import Block from "quill/blots/block";
class ClickableSpan extends Inline {
    // ...
    static create(initialValue) {
        // Allow the parent create function to give us a DOM Node
        // The DOM Node will be based on the provided tagName and className.
        // E.G. the Node is currently <code class="ClickableSpan">{initialValue}</code>
        const node = super.create();
        // Set an attribute on the DOM Node.
        node.setAttribute("spellcheck", false);
        // Add an additional class
        node.classList.add("otherClass")
        // Returning <code class="ClickableSpan otherClass">{initialValue}</code>
        return node;
    // ...
 
constructor(domNode)
 
 
Blot类的构造函数，通过domNode实例化blot。在这里可以做一些通常在class的构造函数中做的事情，比如：事件绑定，缓存引用等。
 
 
class ClickableSpan extends Inline {
    // ...
    constructor(domNode) {
        super(domNode);
        // Bind our click handler to the class.
        this.clickHandler = this.clickHandler.bind(this);
        domNode.addEventListener(this.clickHandler);
    clickHandler(event) {
        console.log("ClickableSpan was clicked. Blot: ", this);
    // ...
 
Blot注册
 
 
上面两段代码中，我们定义了一个简单的Blot，但此时还无法在quilljs中使用它，还需要进行注册，让Parchment认识我们的Blot。
 
 
import Quill from "quill";
// Our Blot from earlier
class ClickableSpan extends Inline { /* ... */ }
ClickableSpan.className = "ClickableSpan";
ClickableSpan.blotName = "ClickableSpan";
ClickableSpan.tagName = "span";
Quill.register(ClickableSpan);
 
Blots需要通过唯一标识区分
 
 
一般来说，有两种方式来调用：
Parchment.create(blotName)
该方式为Blot实例的主要创建方式，通过传入已经注册的blotName来正确创建blot实例。通过quill.update(Delta)或者在逻辑中手动调用Patchment.create(blotName)均是此方式。
 
 
Parchment.create(domNode)
有时候我们需要通过传入domNode来创建blot实例，比如：粘贴/复制的时候，在这种情况中，Blots就需要用到className和tagName来区分。
 
 
在定义一个Blot时，需要为它指定blotName、className、tagName。
 
 
// Matches to <strong ...>...</strong>
class Bold extends Inline {}
Bold.tagName = "strong";
Bold.blotName = "bold";
// Matches to <em ...>...</em>
class Italic extends Inline {
    static tagName = "em";
    static blotName = "italic";
Bold.tagName = "em";
Bold.blotName = "italic";
// Matches to <em class="italic-alt" ...>...</em>
class AltItalic extends Inline {}
AltItalic.tagName = "em";
AltItalic.blotName = "alt-italic";
AltItalic.className = "italic-alt"
 
上面例子中，HTML结构中的<strong></strong>和<em></em>通过tagName区分生成对应的blot，<em></em>和<em class="italic-alt"></em>通过className区分可以生成正确的blot。
 
 
Blot插入及挂载
 
 
经过了Blot的定义和创建的过程，我们还需要将创建好的blot实例插入到quill编辑器的文档树和HTML DOM树中。下面介绍两个api来完成Blot的插入及挂载：
 
 
newBlot.insertInto(parentBlot, refBlot)
这是最主要的插入方法，其他几个插入方法都是基于这个方式实现，该方法就是将newBlot插入到parentBlot的children中，默认作为最后一个元素插入，如果refBlot也正确传入了，就插入到refBlot前面。
 
 
parentBlot.insertBefore(newBlot, refBlot)
这个方法很常用，类似于parentNode.appendChild(domNode)，默认作为最后一个元素插入，如果refBlot正确传入，就插入refBlot之前。
 
 
注意：本文更关注quilljs底层的Patchment相关知识，在实际应用quilljs时，经常会通过构造Delta实例调用quill.updateContents(Delta)来改变编辑器内容。
 
 
Updates 和 Optimization
 
 
ScrollBlot是最顶层的ContainerBlot，它包裹其余所有的blots，并且管理编辑器内的内容变化。ScrollBlot会创建一个MutationObserver，用于掌控编辑器的内容。
ScrollBlot会追踪MutationRecords，然后调用MutationRecord的target中domNode对应的blot的update方法。相关的MutationRecords会被作为参数传入。接下来，ScrollBlot会调用所有受影响的blot的optimize方法（包括这些blot的child blot）。
 
 
update(mutation: MutationRecord[], sharedContext: Object)
Blot发生变化时会被调用，参数mutation的target是blot.domNode。在同一次更新循环中，所有blots收到的sharedContext是相同的。
 
 
optimize(context: Object)
更新循环完成后会被调用，避免在optimize方法中改变document的length和value。该方法中很适合做一些降低document复杂度的事。
简单来说，文档的delta在optimize执行前后应该是一样的，没发生变化。否则，将引起性能损耗。
 
 
Delection 和 Detachment
 
 
remove()
该方法是最常用也最简单的完全移除blot及其domNode的方法。remove主要是将blot的domNode从DOM树中移除，并调用detach()。
 
 
removeChild(blot)
该方法只有containerBlot及继承自containerBlot的类具备，作用是从该containerBlot的.children中移除传入的blot。
 
 
deleteAt(index, length)
该方法会根据给定的index及length来移除调用者的children中对应的blot及内容，若index为0且length为调用者的children的length, 则移除自身。
 
 
detach()
解除一切blot与quill相关的引用关系，从blot的parent上移除自身，同时对children blot调用detach()。
 
 
到这里，Patchment中Blot的主要生命周期已介绍完毕。quilljs的扩展性及其强大，几乎可以在quill编辑器中实现任何的定制化功能。通常的Block/Embed等Blot的定义都比较简单，容易理解，而相对复杂的应该是ContainerBlot如何应用。
后面讲专门写一篇文章，介绍“如何使用Container创建嵌套结构的内容”，有兴趣的朋友可以关注一下。
 
转载于:https://juejin.im/post/5cd04efc6fb9a03247156ff4
                    前言这篇文章中的很多内容都来自Adam Charron的《Getting to know QuillJS - Part 1》中，文中结合了我自己的一些理解和经验，内容也做了些调整，希望能帮到准备使用quilljs的你。quilljs是什么？quilljs是一个现代富文本编辑器，它具备良好的兼容性及强大的可扩展性。用户可以非常方便地实现自定义功能。另一特点是，quilljs自带一套数据系统...
				
Configuration
Quill允许通过多种方式对其进行自定义以满足您的需求。 本节致力于调整现有功能。 有关添加新功能的信息，请参见模块部分；有关样式的信息，请参见主题部分。
Container
Quill 需要一个容器，其中将附加编辑器。 您可以传入CSS选择器或DOM对象。
var editor = new Quill('.editor');  // First matching element will be used
var container = document.getElementB
				
DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。
官方网站：devui.design
Ng组件库：ng-devui（欢迎Star）
本文基于DevUI的富文本编辑器开发实践和Quill源码写成。
EditorX是DevUI开发的一款好用、易用、功能强大的富文本编辑器，它的底层基于Quill，并对其做了大量扩展，以增强编辑器的能力。
Quill是一款API驱动、支持格式和模块定制的开源Web富文本编辑器，目前在..
尝试在浏览器中打开quilljs-table/index.html 。
本项目的目的
虽然此时代码或多或少被黑客攻击，但长期目标是提供足够的材料来理解表行为，以便我们最终为 quill 提供稳定的工作解决方案。
 请随意添加您自己的文件和目录来玩这个概念。
到目前为止的进展
TABLE ， TR和TD是容器-有可能在多个块印迹TD 。
 所有表、行和单元格都由随机字符串标识，并且优化仅合并具有相同 id 的那些。
 可以通过在网格中定义行数和列数来添加表。
 可以向现有表格添加行和列（可通过工具栏中的按钮访问）。
 可以从 Word 复制和粘贴表格。 工作正常
				
Vue Quill Editor是一个基于Quill.js封装的富文本编辑器组件，可以轻松地将富文本编辑器集成到Vue.js应用程序中，支持包括插入表格在内的各种富文本编辑功能。
表格是Vue Quill Editor中一个非常常用的功能之一。要在Vue Quill Editor中插入表格，首先需要在组件中引入Quill.js的Table模块，代码如下：
```js
import Quill from 'quill'
import Table from 'quill/modules/table'
Quill.register(Table, true)
引入Table模块后，就可以在Vue Quill Editor中使用Table模块中提供的API来创建、编辑和删除表格了。以下是一些常用的API：
- `insertTable(rows, columns)`：在当前光标位置插入一个指定行数和列数的表格。
- `deleteTable()`：删除当前光标所在的表格。
- `insertRowAbove()`：在当前所在行的上方插入一行。
- `insertRowBelow()`：在当前所在行的下方插入一行。
- `deleteRow()`：删除当前所在行。
- `insertColumnLeft()`：在当前所在列的左侧插入一列。
- `insertColumnRight()`：在当前所在列的右侧插入一列。
- `deleteColumn()`：删除当前所在的列。
除了这些API之外，还可以使用Quill.js提供的其他API来设置表格的样式、设置单元格的文本内容和格式等等。
总的来说，Vue Quill Editor提供了非常丰富的表格编辑功能，可以轻松地实现各种表格操作。在使用过程中，注意引入Table模块，并且熟悉Quill.js的API即可。