如何自定义Quill

Quill的设计考虑了定制和扩展。 这是通过实现由粒度良好定义的API公开的小编辑器核心来实现的。 核心通过模块进行扩充，使用您可以访问的相同APIs。

通常，常见的自定义在配置，主题和CSS的用户界面，模块进行扩充，使用您可以访问的相同APIs的功能和Parchment的编辑器内容中处理。

配置

Quill更喜欢Code over Configuration™，但是对于非常常见的需求，特别是在等效代码冗长或复杂的情况下，Quill提供了配置选项。 这将是一个很好的首选，以确定您是否甚至需要实现任何自定义功能。

两个最强大的选项是模块和主题。 只需添加或删除单个模块或使用不同的主题，您就可以彻底改变或扩展Quill可以做和做的事情。

主题

Quill正式支持标准工具栏主题Snow和浮动工具提示主题Bubble。 由于Quill不像许多遗留编辑器一样被限制在iframe中，因此可以使用现有主题之一使用CSS进行许多视觉修改。

如果您想彻底更改UI交互，可以省略主题配置选项，这将为您提供无样式的Quill编辑器。 您仍然需要包含一个最小样式表，例如，确保在所有浏览器中呈现空间，并且有序列表具有适当的编号。

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

从那里，您可以实现并附加自己的UI元素，如自定义下拉列表或工具提示。 Cloning Medium with Parchment的最后一部分提供了一个实例。

模块

Quill采用模块化架构设计，由一个小型编辑核心组成，周围环绕着增强其功能的模块。 其中一些功能对于编辑非常不可或缺，例如管理撤消和重做的历史记录模块。 由于所有模块都使用暴露给开发人员的相同公共API，因此在必要时甚至可以交换核心模块。

与Quill的核心本身一样，许多模块都公开了其他配置选项和API。 在决定更换模块之前，请先查看其文档。 通常，您所需的自定义已经实现为配置或API调用。

否则，如果您想彻底改变现有模块已经涵盖的功能，您可以简单地不包含它 - 或者在主题默认包含它时明确地排除它 - 并使用相同的API实现您对Quill外部的喜好功能 默认模块使用。

  1. var quill = new Quill('#editor', {
  2.   modules: {
  3.     toolbar: false    // Snow includes toolbar by default
  4.   },
  5.   theme: 'snow'
  6. });

需要包含一些模块 - 剪贴板，键盘和历史 - 作为核心功能，取决于它们提供的API。 例如，即使undo和redo是基本的，预期的编辑器功能，本机浏览器行为处理也是不一致和不可预测的。 历史记录模块通过实现自己的撤消管理器并将undo（）和redo（）公开为API来弥补差距。

尽管如此，坚持使用Quill模块化设计，您仍然可以通过实现自己的撤消管理器来替换历史记录模块，从而彻底改变撤消和重做或任何其他核心功能的工作方式。 只要您实现相同的API接口，Quill就会很乐意使用您的替换模块。 通过继承现有模块并覆盖要更改的方法，可以轻松完成此操作。 查看模块文档，了解覆盖核心剪贴板模块的一个非常简单的示例。

最后，您可能希望添加现有模块未提供的功能。 在这种情况下，可以方便地将其组织为Quill模块，Building A Custom Module指南涵盖了该模块。 当然，在您的应用程序代码中，将此逻辑与Quill分开肯定是有效的。

内容和格式

Quill允许通过其文档模型Parchment修改和扩展它理解的内容和格式。 内容和格式在Parchment中表示为Blots或Attributors，它们大致对应于DOM中的节点或属性。

类 vs 内联

Quill在可能的情况下使用类而不是内联样式属性，但两者都实现供您选择。 一个实际的例子是作为Playground snippet实现的。

  1. var ColorClass = Quill.import('attributors/class/color');
  2. var SizeStyle = Quill.import('attributors/style/size');
  3. Quill.register(ColorClass, true);
  4. Quill.register(SizeStyle, true);
  6. // Initialize as you would normally
  7. var quill = new Quill('#editor', {
  8.   modules: {
  9.     toolbar: true
  10.   },
  11.   theme: 'snow'
  12. });

自定义Attributors

除了选择特定的Attributor之外，您还可以自定义现有的Attributor。 以下是添加其他字体的字体白名单示例。

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

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

  1. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  2. <style>
  3. .ql-font-roboto {
  4.   font-family: 'Roboto', sans-serif;
  5. }
  6. </style>

自定义Blots

Blots代表的格式也可以定制。 以下是如何更改用于表示粗体格式的DOM节点。

  1. var Bold = Quill.import('formats/bold');
  2. Bold.tagName = 'B';   // Quill uses <strong> by default
  3. Quill.register(Bold, true);
  5. // Initialize as you would normally
  6. var quill = new Quill('#editor', {
  7.   modules: {
  8.     toolbar: true
  9.   },
  10.   theme: 'snow'
  11. });

扩展Blots

您还可以扩展现有格式。 这是一个列表项的快速ES6实现，不允许格式化其内容。 代码块以这种方式实现。

  1. var ListItem = Quill.import('formats/list/item');
  3. class PlainListItem extends ListItem {
  4.   formatAt(index, length, name, value) {
  5.     if (name === 'list') {
  6.       // Allow changing or removing list format
  7.       super.formatAt(name, value);
  8.     }
  9.     // Otherwise ignore
  10.   }
  11. }
  13. Quill.register(PlainListItem, true);
  15. // Initialize as you would normally
  16. var quill = new Quill('#editor', {
  17.   modules: {
  18.     toolbar: true
  19.   },
  20.   theme: 'snow'
  21. });

您可以通过调用console.log（Quill.imports）;来查看可用的Blots和Attributors列表。 不支持直接修改此对象。 请改用Quill.register。

关于 Parchment ，Blots 和 Attributors 的完整参考可以在Parchment自己的README中找到。 要进行深入的演练，请查看Cloning Medium with Parchment，它以Quill理解纯文本开头，添加所有Medium支持的格式。 大多数情况下，您不必从头开始构建格式，因为大多数格式已经在Quill中实现，但它仍然有助于理解Quill如何在更深层次上工作。