quill-better-table:赋予quill富文本编辑器强大的表格编辑功能!

14,236 阅读3分钟

背景

接触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">
  1. 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右上角的小星星哟~