2018-8-3 接触 Quill 编辑器几小时的感受
结论：还不错，我继续看文档去了
这篇文章讲什么？
我2018-8-3下午接触了 quill 编辑器几个小时，包括看谷歌上的相关资料 + 官方文档 + 官方例子。
本文是简短的写一下感受。目的是帮助其他刚开始接触 quill 的程序员节省一些时间。
我是完全看官方的英文文档来学的。
写这篇文时的情况
Quill 的 Github Star 19099
版本是 v1.3.6
正文开始
1-如果你在纠结是选 quill 还是其他编辑器。quill 官方写了一个对比文章
https://quilljs.com/guides/comparison-with-other-rich-text-editors/
这篇长文总结出来就是：
CKEditor 和 TinyMCE
太老，如果你需要支持很老的浏览器可以用他俩
Draft
Draft 需要自己干一定的活才能用，不能拿来即用，而且 Quill 能定制得更深
ProseMirror
目前还是 beta 版，还不稳定
Trix
Quill 能定制的比 Trix 深，Quill 支持所有 Trix 的格式，还支持很多 Trix 不支持的格式。
2-Quill 里出现的新词（新概念）有：
- Bolt
- Parchment
- Deltas
Like the DOM, a Parchment document is a tree. Its nodes, called Blots, are an abstraction over DOM Nodes.
简单说就是，因为 DOM 不适合表示数据和数据的结构，
于是 quill 自己实现了一个数据模型来做这件事（就像 Slate.js 一样）
Parchment 是树，Bolt 是节点，Delta 是数据模型。
这些总结只是我接触了几小时得出来的结论。可能不完全正确。有错可来信指正。
3-如何节省时间（看 document 别看 guide）
官网的左上角有 Document 和 Guide。
如果你只是想拿来就用，做略微修改，Guide 可以忽略不看。
Adding Quill to Your Build Pipeline （左边导航从上到下第三个）
是讲怎么自己编译 Quill，除非要做定制的东西，这一节对你暂时没用。里面讲 webpack 编译等等的东西
Cloning Medium with Parchment
这个讲怎么从 0 开始做一个 Medium 的编辑器。文章循序渐进，例子很好，有空才推荐看看，急着拿来用就可以忽略不看。
Designing the Delta Format
讲 Delta 这种格式。
Delta 用来表示数据和数据的格式（是不是加粗，斜体，等等）
开头第一段代码长这样
var content = [
{ text: 'Hello' },
{ text: 'World', attributes: { bold: true } }
];
4-官方不建议手写Delta，建议用 chainable 来做。
https://quilljs.com/docs/delta/
Note: It is not recommended to construct Deltas by hand—rather use the chainable insert(), delete(), and retain() methods to create new Deltas.
另外
谷歌一搜发现讲 quill 的中文文章还挺多。举几个例子：
React中使用富文本编辑器Quill，支持粘贴图片 - CSDN博客
Quill编辑器添加自定义插件
https://luncher.github.io/2018/06/02/Quill编辑器添加自定义插件/
HTML富文本编辑器Quill的使用
https://www.jianshu.com/p/7c9add8e4e3d
Quill编辑器介绍及扩展
http://www.cnblogs.com/calvinK/p/6322512.html
简介 · Quill中文文档
翻译版本： v1.3.4
http://www.alloyteam.com/2017/09/13191/
过去的编辑器操作的数据和展现给用户的视图层是同一份HTML／DOM，HTML是树状结构，显然树状结构不如线性结构好处理，而Quill内部就是通过使用线性结构的方式使操作富文本编辑器变得简单，而且数据层和视图层是分离的，这让Quill对现在很流行的React、Vue或者Angular都能很好的支持。下面我简单介绍下Quill的使用：
在线富文本编辑器使用笔记 --- 2018/01/31
https://www.jianshu.com/p/9efce5340796
富文本编辑器--选型
https://cdn2.jianshu.io/p/dd8505edfa3a
quill富文本编辑器 | 等英博客
https://www.waitig.com/quill富文本编辑器.html
https://segmentfault.com/a/1190000009877910
https://ithelp.ithome.com.tw/articles/10197871
https://my.oschina.net/u/3460260/blog/1592721
还有几个问题我暂时没得到答案
- （图片）怎么弄图片上传的定制？（我要传到七牛）
- （存储）怎么获取到编辑器里的内容？（要发请求然后存到数据库里去）难道只能拿到 Delta 数据然后 JSON 序列化发给服务器？
- （显示）怎么显示内容？难道是
new Quill()但隐藏 toolbar，然后 quill.setContents 扔进去一个 Delta 数组？ - （界面）样式怎么定制还没细看
结论
因为才接触几小时没有什么大结论
上一个用的编辑器是 tui.editor，就是很传统的直接操作 dom 而且难以定制的编辑器。
之前因为 Taskade 知道了 Slate.js ，看到 Taskade 的编辑器这么吊就看了下 Slate.js 的文档。发现是自己实现了一套东西来表示数据和数据格式（比如文字是"hello"，格式是"粗体"）
不用 DOM，因为 DOM 做编辑器太差劲了。
这次看 Quill 发现 Quill 和 Slate.js 一样也是实现了一套东西来做数据和数据格式的表示。
目前暂时就这些感想。
如果有新进展会来补充或写篇新文
2018-12-26 更新
因为业务变更，我们已经不做网页版的富文本编辑了。转向微信小程序了。
所以自从2018年8，9月我就不再接触 Quill 了。
只是今天2018-12-26刚好来写下更新。
全文完。感谢阅读。