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

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

1. 配置自定义容器

   • 配置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>
     

2. 配置自定义处理程序

   <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>
   

3. 注意事项

• 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中所有按钮添加了默认处理程序的原因，所以最好使用官方提供的方法。

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
• quill@2.0.0-dev.3在codepen上使用示例
• quill@2.0.0-dev.3 in npm
• https://github.com/quilljs/quill/issues/117

5. 结果展示

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