quill-better-table：賦予quill富文本編輯器強大的表格編輯功能！

背景

接觸quilljs是由於公司以前的富文本編輯器已經沒法知足更多的內容生產場景，因而計劃研發一款更加定製化的編輯器。通過一番調研，被quilljs強大的可擴展性，和它獨有的parchment，delta的設計所吸引，選定了它（固然2W+的star也是一個重要緣由）。可是「表格編輯功能」一直困擾着這個優秀的富文本編輯器，具體可從quill的第117號issue: Add support for table瞭解一二。

按照quill做者的計劃，quilljs 2.0將會支持表格編輯，可是功能很是有限，好比：表格中沒法換行、沒法合併/拆分單元格等。因而決定努力爲quilljs補充這一功能缺失。

quill-better-table

基於quilljs v2.0.0-dev.x版本的表格模塊，支持多種經常使用功能，旨在改善quill編輯器在表格編輯方面的弱勢。
git倉庫：github.com/soccerloway…
在線demo：codepen demo

功能特性

• 支持表格單元格內（enter鍵）換行；
• 經過拖拽拖選多個單元格（表格區域），有藍色框高亮提示；
• 使用右鍵菜單在所選表格區域的左/右添加新列；
• 使用右鍵菜單在所選表格區域的上/下添加新行；
• 刪除位於拖選區域內的行/列；
• 批量合併/拆分單元格；
• 拖拽表格頂部的列控制工具，可改變相應表格列的寬度。

使用須知

quill-better-table 基於quilljs 2.0版本實現，quilljs 2.0版目前並未發佈穩定版，須謹慎選擇使用（O(∩_∩)O~我已經把2.0用到生產環境了，hold住）。
因爲我使用webpack externals指定外部引入依賴的方式打包，因此請務必將Quill對象暴露到window對象上，或者經過script標籤的方式引入quilljs，以便quill-better-table獲取依賴。

安裝

npm install quill-better-table
複製代碼

用法

1. 加載外部依賴：

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.min.js" type="text/javascript"></script>
複製代碼

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.snow.min.css" rel="stylesheet">
<link href="unpkg.com/quill-better-table@1.1.0/dist/quill-better-table.css" rel="stylesheet">
複製代碼

2. ES6具體用法：

import QuillBetterTable from 'quill-better-table'

Quill.register({
  'modules/better-table': QuillBetterTable
}, true)

window.onload = () => {
  const quill = new Quill('#editor-wrapper', {
    theme: 'snow',
    modules: {
      table: false,  // disable table module
      'better-table': {
        operationMenu: {
          items: {
            unmergeCells: {
              text: 'Another unmerge cells name'
            }
          }
        }
      },
      keyboard: {
        bindings: QuillBetterTable.keyboardBindings
      }
    }
  })

  document.body.querySelector('#insert-table')
    .onclick = () => {
      let tableModule = quill.getModule('better-table')
      tableModule.insertTable(3, 3)
    }
}
複製代碼

模塊API

首先，可使用quill.getModule(module_name)獲取quill-better-table:

let tableModule = quill.getModule('better-table')
複製代碼

tableModule.getTable(range = quill.getSelection())

獲取傳入range位置的表格信息，返回一個裝有當前TableContainer, TableRow, TableCell, offset的數組。

module.getTable()  // current selection
module.getTable(range)
// [TableContainer, TableRow, TableCell, 0]
複製代碼

tableModule.insertTable(rows: Number, columns: Number)

在光標位置插入新的表格

tableModule.insertTable(3, 3)
複製代碼

模塊配置項

目前quill-better-table只提供了右鍵功能菜單（operationMenu）的選項配置：

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    table: false,  // disable table module
    'better-table': {
      operationMenu: {
        items: {
          unmergeCells: {
            text: 'Another unmerge cells name'
          }
        }
      }
    },
    keyboard: {
      bindings: QuillBetterTable.keyboardBindings
    }
  }
})
複製代碼

operationMenu.items

右鍵操做菜單默認會開放全部操做功能。將items中某一項配置爲false即爲關閉該操做，右鍵菜單中也不會出現該對應按鈕。

items: {
  {
    operationKey: {
      text: 'foo'
    },
    
    operationKey: false
  }
}
複製代碼

operationKey表示功能的名稱，下面的列表列出了全部功能名稱供配置：

• insertColumnRight
• insertColumnLeft
• insertRowUp
• insertRowDown
• mergeCells
• unmergeCells
• deleteColumn
• deleteRow
• deleteTable

operationKey.text表示功能在右鍵菜單中的按鈕的文字，能夠根據須要配置按鈕文字。

最後

若是quill-better-table可以幫助到您，但願您能經過回覆、郵件或git issues提出你寶貴的建議，我會繼續努力，不斷完善它的。後續計劃經過另外一篇文章來具體講解一下quill-better-table的核心原理。

對了對了，別忘了github右上角的小星星喲~