为什么选择 Quill

自 Web 诞生以来，内容创建一直是其核心。<textarea> 为几乎所有 Web 应用提供了原生且必要的解决方案。但在某些时候，你可能需要为文本输入添加格式。这就是富文本编辑器的用武之地。有很多解决方案可供选择，但 Quill 提出了一些现代的想法供你参考。

¥Content creation has been at the core to the web since its beginning. The <textarea> provides a native and essential solution to almost any web application. But at some point you may need to add formatting to text input. This is where rich text editors come in. There are many solutions to choose from, but Quill brings a few modern ideas to consider.

API 驱动设计

¥API Driven Design

富文本编辑器旨在帮助人们编写文本。然而令人惊讶的是，大多数富文本编辑器并不知道用户输入了什么文本。这些编辑器以与 Web 开发者相同的视角查看其内容：DOM。这会导致阻抗不匹配，因为 DOM 由组织成不平衡树的节点组成，而文本由行、单词和字符组成。

¥Rich text editors are built to help people write text. Yet surprisingly, most rich text editors have no idea what text the user composed. These editors see their content through the same lens a web developer does: the DOM. This presents an impedance mismatch since the DOM is made up of Nodes organized in an unbalanced tree, whereas text is made up of lines, words and characters.

没有以字符为度量单位的 DOM API。由于此限制，大多数富文本编辑器无法回答诸如 "此范围内的文本是什么？" 或 "光标是否位于粗体文本上？" 之类的简单问题。尝试在这些原语之上构建丰富的编辑体验非常困难且令人沮丧。

¥There is no DOM API where characters is the unit of measure. With this limitation, most rich text editors cannot answer simple questions such as "What text is in this range?" or "Is the cursor on bolded text?" Trying to build rich editing experiences on top of such primitives is very difficult and frustrating.

Quill 在设计时就考虑到了编辑和字符，并将其 API 构建在这些以文本为中心的自然单元之上。要确定某些内容是否为粗体，Quill 无需遍历 DOM 来查找 <b> 或 <strong> 节点或字体粗细样式属性 - 只需调用 getFormat(5, 1) 即可。所有核心 API 调用都允许访问或修改任意索引和长度。它的 事件 API 还以直观的 JSON 格式报告更改。无需解析 HTML 或 diff DOM 树。

¥Quill was designed for editing and characters in mind, and built its APIs on top of these natural text centric units. To find out if something is bold, Quill does not require traversing the DOM looking for <b> or <strong> nodes or a font-weight style attributes—just call getFormat(5, 1). All of its core API calls allow arbitrary indexes and lengths for access or modification. Its event API also reports changes in an intuitive JSON format. No need to parse HTML or diff DOM trees.

自定义内容和格式

¥Custom Content and Formatting

不久前，评估富文本编辑器就像比较所需格式的清单一样简单。一个优秀的富文本编辑器的标志就是它支持的格式数量。这仍然是一个重要的衡量标准，但下限正在趋近于无穷大。

¥It was not far in the past that evaluating rich text editors was as simple as comparing a checklist of desired formats. The mark of a good rich text editor was simply how many formats it supported. This is still an important measure, but the lower bound is approaching infinity.

文本不再需要打印。它被编写为可在 Web 上渲染 - 一个比纸张更丰富的画布。内容可以是实时的、交互式的，甚至是协作式的。只有部分富文本编辑器才能支持图片和视频等简单媒体；几乎没有编辑器可以嵌入推文或交互式图表。然而，这正是 Web 发展的方向：更丰富，更具交互性。支持内容创建的工具需要考虑这些用例。

¥Text is no longer written to be printed. It is written to be rendered on the web—a much richer canvas than paper. Content can be live, interactive, or even collaborative. Only some rich text editors can even support simple media like images and videos; almost none can embed a tweet or interactive graph. Yet this is the direction the web is moving: richer and more interactive. The tools supporting content creation need to consider these use cases.

Quill 公开了自己的文档模型，这是对 DOM 的强大抽象，允许扩展和自定义。Quill 支持的格式和内容的上限是无限的。用户已经使用它来添加嵌入式幻灯片、交互式清单和 3D 模型。

¥Quill exposes its own document model, a powerful abstraction over the DOM, allowing for extension and customization. The upper limit on the formats and content Quill can support is unlimited. Users have already used it to add embedded slide decks, interactive checklists, and 3D models.

跨平台

¥Cross Platform

跨平台支持对许多 JavaScript 库来说都很重要，但其含义的标准通常有所不同。对于 Quill 来说，工具栏不仅仅是运行或工作，它必须以相同的方式运行或工作。不仅要考虑功能跨平台性，还要考虑用户和开发者的体验。如果某些内容在 OSX 上的 Chrome 浏览器中生成特定标记，则在 IE 上也会生成相同的标记。如果在 Windows 上的 Firefox 中按 Enter 键会保留粗体格式状态，则在移动版 Safari 中也会保留该状态。

¥Cross platform support is important to many JavaScript libraries, but the criteria for what this means often differs. For Quill, the bar is not just that it runs or works, it has to run or work the same way. Not only is functionality a cross platform consideration, but user and developer experience is as well. If some content produces a particular markup in Chrome on OSX, it will produce the same markup on IE. If hitting enter preserves bold format state in Firefox on Windows, it will be preserved on mobile Safari.

易于使用

¥Easy to Use

所有这些优势都包含在一个易于使用的包中。Quill 附带了一些合理的默认设置，你只需几行 JavaScript 代码即可立即使用：

¥All of these benefits come in an easy to use package. Quill ships with sane defaults you can immediately use with just a few lines of JavaScript:

const quill = new Quill('#editor', {
  modules: { toolbar: true },
  theme: 'snow'
});

如果你的应用不需要自定义 Quill，则无需自定义，只需享受开箱即用的丰富一致体验即可。

¥If your application never demands it, you never have to customize Quill—just enjoy the rich and consistent experience that comes out of the box.

尽情享受吧！

¥Enjoy!