quill v1.0 版本不支持插入表格，v2的dev版本支持表格编辑，但目前只能实现在工具栏以外的地方放置按钮，实现点击按钮添加/操作表格，作者已声明：You can do npm install quill@2.0.0-dev.2 but yes use at your own risk.（最新版本为quill@2.0.0-dev.3）
实现目标：在工具栏添加表格操作按钮
初选方案一
在quill v1.0 版本基础上对quil添加扩展代码从而支持表格，在github上有找到对应的项目https://github.com/dost/quilljs-table ，这个项目中包含两个demo以不同的方式支持表格，分别在quilljs-table和table文件夹中。
优点：
- 在工具栏插入表格操作按钮
- 插入表格的行数和列数可选
- 支持修改表格背景色
缺点：
- 某些表格操作会导致控制台报错
- 工具栏中的表格操作按钮用文本表示（无图标）
终选方案二
在工具栏添加表格操作图标，使用quill@2.0.0-dev.3中的表格操作方法为图标添加自定义处理方法 ，可实现简单的表格操作，目前较为稳定，暂未发现问题。
quill支持配置自定义的工具栏图标container和事件处理程序handlers
-
配置自定义容器
- 配置
toolbar的数组选项从而定制工具栏的功能<div id="editor"></div> <script> var toolbarOptions = [ 'bold', 'italic', 'underline', [ { 'table-body': 'TBODY' }, { 'table-insert-rows': 'ITR' }, { 'table-insert-columns': 'TIC' }, { 'table-delete-rows': 'IDR' }, { 'table-delete-columns': 'TDC' }, { 'table-delete-body': 'TDB' } ] ]; // 工具栏支持加粗、斜体、下划线等功能，quilljs会根据这些名称在工具栏创建对应的按钮（button标签），绑定对应的class const quill = new Quill('#editor', { // 'editor'为编辑框对应元素的id modules: { toolbar: { container: toolbarOptions } } }); </script> - 上面的方法只能在工具栏创建quilljs内部定好的按钮格式，如果想创建完全自定义的工具栏，参考下面代码
<div id="toolbar"> <!-- 此类按钮，quill会根据类名添加对应的事件处理程序 --> <button class="ql-bold"></button> <button class="ql-italic"></button> <!--此类自定义按钮，可自行添加对应的事件处理程序 --> <button id="custom-button"></button> </div> <div id="editor"></div> <script> const quill = new Quill('#editor', { modules: { toolbar: '#toolbar' } }); </script>
- 配置
-
配置自定义处理程序
<script> let toolbarOptions = { handlers: { 'table-body': function (val) { this.quill.getModule('table').insertTable(2, 2) // this引用工具栏实例, val表示按钮是否处于活动状态active }, 'table-insert-rows': function () { this.quill.getModule('table').insertRowBelow() }, 'table-insert-columns': function () { this.quill.getModule('table').insertColumnRight() }, 'table-delete-rows': function () { this.quill.getModule('table').deleteRow() }, 'table-delete-columns': function () { this.quill.getModule('table').deleteColumn() }, 'table-delete-body': function () { this.quill.getModule('table').deleteTable() } } } const quill = new Quill('#editor', { modules: { toolbar: toolbarOptions } }); // 也可以按照如下方法添加自定义处理程序 const toolbar = quill.getModule('toolbar'); toolbar.addHandler('image', showImageUI); </script> -
注意事项
- quilljs升级到v2.0，
pasteHTML方法改为dangerouslyPasteHTML，如果使用vue-quill-editor，需要修改对应方法； - 在创建Quill实例时，配置项中的
module属性需要设置table: true，从而使quill实例能够使用table操作方法； - 在工具栏
toolbar中添加表格按钮后，quill并不会自动拿到对应的图标，需要手动为按钮添加图标，如：<script> const TB = document.getElementsByClassName('ql-table-body')[0] TB.innerHTML = `<svg viewbox="0 0 18 18"><rect class="ql-stroke" height="12" width="12" x="3" y="3"></rect><rect class="ql-fill" height="2" width="3" x="5" y="5"></rect><rect class="ql-fill" height="2" width="4" x="9" y="5"></rect><g class="ql-fill ql-transparent"><rect height="2" width="3" x="5" y="8"></rect><rect height="2" width="4" x="9" y="8"></rect><rect height="2" width="3" x="5" y="11"></rect><rect height="2" width="4" x="9" y="11"></rect></g></svg>` </script> - 如果不使用2中所述方法添加自定义处理程序，而是通过获取按钮元素并对其添加点击事件处理程序的方法，则会导致首次点击按钮报错，这可能是quill为toolbar中所有按钮添加了默认处理程序的原因，所以最好使用官方提供的方法。
-
参考资料
- 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
- quill@2.0.0-dev.3在codepen上使用示例
- quill@2.0.0-dev.3 in npm
- https://github.com/quilljs/quill/issues/117
-
结果展示
Quill富文本编辑支持表格.png
网友评论