[TOC]
内容创建从一开始就一直是网页的核心。几乎所有的Web应用使用`<textarea>`作为一种原生的基本解决方案。但是,在某些时候,您可能需要在文本输入中添加格式,这就需要富文本编辑器。这里有许多选择,但Quill带来了一些可参考的现代思想。
## API驱动的设计
富文本编辑器帮助人们编写文本,但奇怪的是,大多数富文本编辑器都不知道用户编写了什么文本内容。这些编辑器通过与Web开发人员相同的视角查看内容,这就是DOM。因为DOM由不平衡数中的节点组成,而文本是由行、词及字符组成,这呈现了它们之间的不一致。
DOM没有以字符为单位的API,因为这个限制,大多数富文本编辑器无法回答诸如“此范围内的文本是什么?”或者“光标在粗体文本上吗?”的问题。在这些原型的基础上,很难建立丰富的编辑体验。
Quill是为编辑和记住字符而设计的,它的api构建在这些以自然文本为中心的单元之上。为了查找粗体字符,Quill不需要遍历DOM来查找`<b>` 或 `<strong>`节点,而只需要调用[`getFormat(5, 1)`](../api/格式化formatting.md)查找font-weight的样式属性。所有核心[API](../api.md) 调用都允许访问或修改任意索引和长度。 [event API](../api/事件events.md)还能以直观的JSON格式报告更改,不需要解析HTML或diff DOM树。
## 自定义内容和格式
在过去,评估富文本编辑器进行就像比较所需格式的清单一样简单。一个好的富文本编辑器的标志就是它支持多少格式。这仍然是评价富文本编辑器一个重要的措施,但这几乎可以忽略。
文本不再打印,而是直接呈现在网页上——比纸更丰富的画布。内容可以是实时的、交互式的,甚至是协作的。一些富文本编辑器甚至可以支持简单的媒体,如图像和视频。几乎没有编辑器能嵌入tweet或交互式图表。然而,这正是网络发展的方向:更丰富、更互动。支持内容创建的工具需要考虑这些场景。
Quill公开了自己的文档模型,这是对DOM的强大抽象,允许扩展和定制。Quill可以支持无上限的格式和内容。用户已经使用它添加嵌入式幻灯片,交互式检查表和三维模型。
## 跨平台
跨平台支持对许多Javascript库都很重要,但这意味着不同平台标准往往不同。对Quill来说,这条不仅仅指他能运行和工作,而且必须用同样的方式运行和工作。功能不仅仅是跨平台的考虑,用户和开发人员的体验也是如此。如果某些内容在OSX上的Chrome中产生了特定的标记,那么它在IE上也会产生相同的标记。如果在Windows上的Firefox中按enter保留粗体格式状态,则这个功能也将保留在mobile Safari中。
## 易用
这些好处可以通过简单的使用一个打包库获得。 Quill自带默认的参数,你只需要用几行JavaScript代码来启用:
```js
var quill = new Quill('#editor', {
modules: { toolbar: true },
theme: 'snow'
});
```
如果您的应用不需要定制,你就不用定制Quill,就好好享受开箱即用的丰富一致的体验。
Enjoy!
- 前言
- 快速开始(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
- 更多模块