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 可以忽略不看。
331

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

还有几个问题我暂时没得到答案

  1. (图片)怎么弄图片上传的定制?(我要传到七牛)
  2. (存储)怎么获取到编辑器里的内容?(要发请求然后存到数据库里去)难道只能拿到 Delta 数据然后 JSON 序列化发给服务器?
  3. (显示)怎么显示内容?难道是 new Quill() 但隐藏 toolbar,然后 quill.setContents 扔进去一个 Delta 数组?
  4. (界面)样式怎么定制还没细看

结论

因为才接触几小时没有什么大结论
上一个用的编辑器是 tui.editor,就是很传统的直接操作 dom 而且难以定制的编辑器。

之前因为 Taskade 知道了 Slate.js ,看到 Taskade 的编辑器这么吊就看了下 Slate.js 的文档。发现是自己实现了一套东西来表示数据和数据格式(比如文字是"hello",格式是"粗体")
不用 DOM,因为 DOM 做编辑器太差劲了。

这次看 Quill 发现 Quill 和 Slate.js 一样也是实现了一套东西来做数据和数据格式的表示。
目前暂时就这些感想。
如果有新进展会来补充或写篇新文

全文完。感谢阅读。

2018-8-3 接触 Quill 编辑器几小时的感受
Share this

Subscribe to 1c7 的博客