QuillJs扩展使用——富文本编辑支持表格

quill v1.0 版本不支持插入表格，v2的dev版本支持表格编辑，但目前只能实现在工具栏以外的地方放置按钮，实现点击按钮添加/操作表格，作者已声明：You can do npm install [email protected] but yes use at your own risk.（最新版本为[email protected]）

实现目标：在工具栏添加表格操作按钮

初选方案一

在quill v1.0 版本基础上对quil添加扩展代码从而支持表格，在github上有找到对应的项目https://github.com/dost/quilljs-table ，这个项目中包含两个demo以不同的方式支持表格，分别在quilljs-table和table文件夹中。

优点：

• 在工具栏插入表格操作按钮
• 插入表格的行数和列数可选
• 支持修改表格背景色

缺点：

• 某些表格操作会导致控制台报错
• 工具栏中的表格操作按钮用文本表示（无图标）

终选方案二

在工具栏添加表格操作图标，使用[email protected]中的表格操作方法为图标添加自定义处理方法 ，可实现简单的表格操作，目前较为稳定，暂未发现问题。

quill支持配置自定义的工具栏图标container和事件处理程序handlers

1. 配置自定义容器

   • 配置toolbar的数组选项从而定制工具栏的功能

   • 上面的方法只能在工具栏创建quilljs内部定好的按钮格式，如果想创建完全自定义的工具栏，参考下面代码

2. 配置自定义处理程序

3. 注意事项

• quilljs升级到v2.0，pasteHTML方法改为dangerouslyPasteHTML，如果使用vue-quill-editor，需要修改对应方法；
• 在创建Quill实例时，配置项中的module属性需要设置table: true，从而使quill实例能够使用table操作方法；
• 在工具栏toolbar中添加表格按钮后，quill并不会自动拿到对应的图标，需要手动为按钮添加图标，如：

• 如果不使用2中所述方法添加自定义处理程序，而是通过获取按钮元素并对其添加点击事件处理程序的方法，则会导致首次点击按钮报错，这可能是quill为toolbar中所有按钮添加了默认处理程序的原因，所以最好使用官方提供的方法。

4. 参考资料

• https://github.com/dost/quilljs-table
• http://quilljstable.timepress.cz/quilljs-extended-toolbar/index.html
• 在 Vue 项目中引入 tinymce 富文本编辑器
• quilljs官方文档toolbar
• vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options
• Vue之使用 vue-quill-editor_自定义toolbar_修改图片上传方式
• 富文本编辑器比较
• https://github.com/surmon-china/vue-quill-editor/issues/7
• [email protected]在codepen上使用示例
• [email protected] in npm
• https://github.com/quilljs/quill/issues/117

5. 结果展示

Quill富文本编辑支持表格.png