[TOC]
Quill在设计的时候就考虑到了定制和扩展，这些是通过由细粒度、良好定义的 [API](../api.md)组成的小型编辑器核心来实现的。编辑器核心通过[modules](../模块modules.md)来增强功能，同时使用了对用户开放的[APIs](../api.md)。
一般的，常见的定制是通过[配置(configurations)](#configurations)设置，用户界面通过[主题(Themes)](#themes) 和 CSS实现，功能是通过[模块(modules)](#modules)实现，编辑器内容是用[Parchment](#content-and-formatting)实现。
## 配置(Configurations)
Quill比起Configuration™更喜欢代码(Code)，但对于非常常见的需求，特别是用等效代码可能很长或很复杂的情况下，Quill提供 [配置(configuration)](../格式formats.md) 选项。这是确定是否需要任何自定义功能的首选地方。
最强大的两个选项是 `modules` and `theme`。你只需简单的添加或删除单个[模块(modules)](../模块modules.md) 或使用不同的[主题(theme)](../主题themes.md)，就可以彻底改变或扩展Quill的功能和功能。
## 主题(Themes)
Quill官方提供一个标准的工具栏主题 [Snow](../主题themes.md)和一个浮动提示主题[Bubble](../主题themes.md)。由于Quill不像许多遗留编辑器局限在iframe中，你可以使用CSS及现有主题修改视图。
如果你想彻底改变UI交互，可以省略`theme`配置选项。这样就会提供一个无样式的Quill编辑器。你仍需要包含一个最小的样式表，比如确保所有浏览器中空格渲染和有序list呈现适当的编号。
```html
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.core.css">
```
从那里你可以实现添加你自己的UI元素，如自定义下拉菜单或工具提示。文章[Cloning Medium with Parchment](cloning-medium-with-parchment.md)的最后一部分提供了一个这样的例子。
## 模块(modules)
Quill是由小编辑核心和增强功能的模块组成的模块化架构设计。其中一些功能对编辑是必不可少的，比如管理撤销和重做功能的[History](../modules/历史记录history.md) 模块。因为所有模块使用向开发人员公开的相同的公共[API](../api.md) ，在必要的时候甚至可以交换核心模块。
和Quill的核心本身一样，许多[modules](../模块modules.md) 暴露了二维的配置选项和API。在决定替换一个模块前，请查看对应的文档。所需的定制常常已经能作为配置或通过调用API实现。
如果您想彻底改变现有的模块已经有的功能，你可以简单的不包括它或者在内置有这个功能的主题中明确的排除它，并使用默认模块相同的 [API](../api.md) 来实现您喜欢的Quill扩展功能。
```js
var quill = new Quill('#editor', {
modules: {
toolbar: false // Snow includes toolbar by default
},
theme: 'snow'
});
```
一些模块如[Clipboard](../modules/粘贴板clipboard.md)、[Keyboard](../modules/键盘keyboard.md)和[History](../modules/历史记录history.md)需要作为核心功能包括进来，这取决于他们提供的API。例如，尽管撤销(undo)、重做(redo)是基本的、应有的编辑器功能，但处理这个的原生浏览器行为是不一致和不可预测的。History模块通过实现自己的undo管理器并将`undo()`和`redo()`作为api暴露来缩小不同浏览器之间的差距。
尽管如此，按照Quill模块化设计，您仍然可以通过实现自己的undo管理器来替换History模块，从而彻底改变undo和redo或任何其他核心功能的工作方式。只要实现相同的API接口，Quill乐于使用您的替换模块。最容易的是通过继承现有模块和覆盖要更改的方法来完成。查看模块文档可以获得覆盖核心 [Clipboard](../modules/粘贴板clipboard.md) 模块的简单示例。
最后，您可能需要添加现有模块未提供的功能。在这种情况下，可以方便地将其组织为一个Quill模块，而[构建自定义模块](building-a-custom-module.md) 这篇文章介绍了方法。当然，在您的应用程序代码中，可以有效的和Quill保持逻辑分离。
## 内容和格式化
Quill允许通过它解析的文档模型<a href="https://github.com/quilljs/parchment/">Parchment</a>来修改或扩展内容和格式。内容和格式在Parchment中表示为blot或attributor，他们大致对应DOM中的节点和属性。
### 类与内联
如果可能的话，Quill使用更愿意使用类，而不是内联样式属性，但是您可任意以选着和使用者两者。 这里有个实时的例子:<a href="https://codepen.io/liuwave/pen/povzWeX">Playground snippet</a>。
```js
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'
});
```
### 自定义属性
除了选着特定的属性，您也可以自定义现有的属性。这里有个添加其他字体到字体白名单的示例。
```js
var FontAttributor = Quill.import('attributors/class/font');
FontAttributor.whitelist = [
'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
];
Quill.register(FontAttributor, true);
```
注意，您仍需要将这些类的样式添加到Css文件中。
```html
<style>
/* roboto-regular */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: regular;
src: url('//lib.baomitu.com/fonts/roboto/roboto-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Normal'),
url('//lib.baomitu.com/fonts/roboto/roboto-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//lib.baomitu.com/fonts/roboto/roboto-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('//lib.baomitu.com/fonts/roboto/roboto-regular.woff') format('woff'), /* Modern Browsers */
url('//lib.baomitu.com/fonts/roboto/roboto-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('//lib.baomitu.com/fonts/roboto/roboto-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
.ql-font-roboto {
font-family: 'Roboto', sans-serif;
}
</style>
```
### 自定义 Blots
Blot呈现的格式也能自定义。这里是如何改变DOM节点来呈现粗体格式的示例。
```js
var Bold = Quill.import('formats/bold');
Bold.tagName = 'B'; // Quill uses <strong> by default
Quill.register(Bold, true);
// Initialize as you would normally
var quill = new Quill('#editor', {
modules: {
toolbar: true
},
theme: 'snow'
});
```
### 扩展 Blots
您还可以扩展现有格式。下面是禁止格式化除list格式外的内容的一个ES6快速实现。实现这个的代码块如下：
```js
var ListItem = Quill.import('formats/list/item');
class PlainListItem extends ListItem {
formatAt(index, length, name, value) {
if (name === 'list') {
// 允许改变和移除list格式
super.formatAt(name, value);
}
// Otherwise ignore
}
}
Quill.register(PlainListItem, true);
// Initialize as you would normally
var quill = new Quill('#editor', {
modules: {
toolbar: true
},
theme: 'snow'
});
```
你可以通过 `console.log(Quill.imports);`查看Blot和Attribute列表。不支持直接修改此对象，如要修改，请用U[`Quill.register`](../api/扩展extension.md) 代替.
您可以在Parchment自己的 <a href="https://github.com/quilljs/parchment/">README</a>中找到 Parchment、Blot 和 Attributor的完整参考。要深入学习的话，请查看[Cloning Medium with Parchment](cloning-medium-with-parchment.md)，通过Quill从理解纯文本开始，到添加所有<a href="https://medium.com/">Medium</a>支持的格式。大多数情况，您不必从涛开始构建格式，因为大多数格式已经在Quill中实现，但是理解Quill在这个深度上如何工作是很有用的。
- 前言
- 快速开始(quick_start)
- 下载(download)
- 配置(configuration)
- 格式(formats)
- API
- 内容(contents)
- 格式化(formatting)
- 选区(selection)
- 编辑器(editor)
- 事件(events)
- 模型(model)
- 扩展(extension)
- 增量(Delta)
- 模块(modules)
- 工具栏(toolbar)
- 键盘(keyboard)
- 历史记录(history)
- 粘贴板(clipboard)
- 语法高亮(syntax)
- 主题(themes)
- 更多教程
- 为什么选择Quill？
- 如何定制Quill？
- 设计Delta格式(未翻译)
- 构建一个自定义模块
- 将Quill加入你的编译管线(未翻译)
- Cloning Medium with Parchment
- 和其它富文本编辑器的对比(未翻译)
- Designing the Delta Format
- 扩展模块
- vue-quill-editor
- quill-image-extend-module
- quill-image-resize-module
- quill-image-drop-module
- quill-better-table
- quilljs-table
- 更多模块