如何自定义或定制Quill（ — Quill富文本编辑器快速入门中文文档） _定制quill

上一节内容请查看：为什么使用Quill？
Quill的设计考虑到了定制和扩展，这是通过实现一个由细粒度的、定义良好的API公开的小型编辑器核心来实现的，使用易于访问的相同API、模块对核心进行了扩展。
一般来说，常见的定制是通过配置来处理的，主题和CSS对应用户界面的处理，模块对应功能的实现，编辑器内容是通过手稿（Parchment）来处理的。
一、配置在等效代码很长或很复杂的情况下，Quill提供了配置选项，这是确定是否需要实现任何自定义功能的第一个好的选项。
最强大的两个选项是模块和主题，你可以通过简单地添加或删除单个模块或使用不同的主题来彻底地改变或扩展Quill所能做的事情。
二、主题Quill正式支持一个标准的工具栏主题Snow和一个浮动的工具提示主题Bubble。由于Quill不像许多旧的编辑器那样局限在iframe中，所以可以使用现有的主题之一，仅使用CSS进行许多可视化修改。
如果你想要大幅度地改变UI交互，你可以忽略主题配置选项，它将为你提供一个无风格的Quill编辑器。但是你仍然需要包括一个最小的样式表，例如确保在所有浏览器中呈现的空格和有序列表的编号都是适当的。

< link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.core.css">

从这里你可以实现并附加你自己的UI元素，如自定义下拉菜单或工具提示，本节后面提供了一个实际的例子。
三、模块Quill采用模块化架构设计，周围围绕着增强其功能的模块，由一个小型编辑核心组成。其中一些功能对于编辑来说是不可或缺的，比如管理撤消和重做的History模块。由于所有模块都使用相同的公开给开发人员的公共API，因此在必要时甚至可以更改核心模块。
与Quill核心本身一样，许多模块也提供了额外的配置选项和api，另外如果你需要彻底改变现有模块已经覆盖的功能，你可以简单地不包含它，或者在主题默认包含它时显式地排除它，并使用默认模块使用的相同API在Quill外部实现你喜欢的功能。

var quill = new Quill('#editor', { modules: { toolbar: false// Snow主题默认包含toolbar }, theme: 'snow' });

需要包含的一些模块如：剪贴板、键盘和历史记录，这些核心功能取决于它们提供的api。例如尽管撤销和重做是基本的、预期的编辑器功能，但是本地浏览器对此的行为处理是不一致和不可预测的，History模块通过实现自己的undo管理器并将undo()和redo()作为api公开。
只要你现了相同的API接口，Quill就会使用你替换模块。这最容易通过继承现有模块并覆盖要更改的方法来实现。查看模块文档，以获得覆盖核心剪贴板模块的简单示例。
你可能希望添加现有模块没有提供的功能，可以通过实现一个Quill模块，构建自定义模块将涵盖该模块。当然在你的应用程序代码中，将这个逻辑与Quill分开是完全正确的。
四、内容和格式Quill允许修改和扩展其内容和格式，内容和格式在Prchment中表示为Blots或属性，它们大致对应于DOM中的节点或属性。
1、类和内联
在可能的情况下Quill使用类而不是内联样式属性，但是这两种方法都是为你挑选而实现的，这方面的一个实际示例是下面的代码片段。

var ColorClass = Quill.import('attributors/class/color'); var SizeStyle = Quill.import('attributors/style/size'); Quill.register(ColorClass, true); Quill.register(SizeStyle, true); // 按正常方式初始化 var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow' });

2、自定义属性
除了选择特定的属性外，你还可以自定义现有的属性。下面是一个用于添加额外字体的字体白名单示例。

var FontAttributor = Quill.import('attributors/class/font'); FontAttributor.whitelist = [ 'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu' ]; Quill.register(FontAttributor, true);

注意你仍然需要将这些类的样式添加到CSS文件中。

< style> .ql-font-roboto { font-family: 'Roboto', sans-serif; } < /style>

3、自定义Blot
下面是如何更改用来表示粗体格式的DOM节点。

var Bold = Quill.import('formats/bold'); Bold.tagName = 'B'; // Quill默认使用< strong> Quill.register(Bold, true); // 正常初始化 var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow' });

4、扩展Blot
你还可以扩展现有的格式。下面是一个不允许格式化其内容的列表项的快速ES6实现。代码块就是这样实现的。

var ListItem = Quill.import('formats/list/item'); class PlainListItem extends ListItem { formatAt(index, length, name, value) { if (name === 'list') { // 允许更改或删除列表格式 super.formatAt(name, value); } // 否则忽略 } }Quill.register(PlainListItem, true); // 正常初始化Quill var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow' });

console.log(Quill.imports); 查看可用的Blots和属性列表，不支持直接修改此对象， Quill.register是另外的可用方法。
【如何自定义或定制Quill（ — Quill富文本编辑器快速入门中文文档）】完整的参考文献在Parchment，Blot和属性可以找到Parchment描述。要进行深入的攻略请查看Parchment克隆媒体，从只能理解纯文本的Quill开始，到添加媒体支持的所有格式。大多数时候不必从头开始构建格式，因为大多数格式已经在Quill中实现了，但是这对于理解Quill在更深层次上是如何工作的仍然很有用。