quill-better-table：赋予quill富⽂本编辑器强⼤的表格编辑功
能！
背景
接触quilljs是因为公司之前的富⽂本编辑器已经⽆法满⾜更多的内容⽣产场景，于是计划研发⼀款更加定制化的编辑器。经过⼀番调研，被quilljs强⼤的可扩展性，和它独有的parchment，delta的设计所吸引，选定了它（当然2W+的star也是⼀个重要原因）。但是“表格编辑功能”⼀直困扰着这个优秀的富⽂本编辑器，具体可从quill的第117号issue: 了解⼀⼆。
按照quill作者的计划，quilljs 2.0将会⽀持表格编辑，但是功能⾮常有限，⽐如：表格中⽆法换⾏、⽆法合并/拆分单元格等。于是决定努⼒为quilljs补充这⼀功能缺失。
quill-better-table
基于quilljs v2.0.0-dev.x版本的表格模块，⽀持多种常⽤功能，旨在改善quill编辑器在表格编辑⽅⾯的弱势。
git仓库：
在线demo：
功能特性
⽀持表格单元格内（enter键）换⾏；
通过拖拽拖选多个单元格（表格区域），有蓝⾊框⾼亮提⽰；
使⽤右键菜单在所选表格区域的左/右添加新列；
使⽤右键菜单在所选表格区域的上/下添加新⾏；
删除位于拖选区域内的⾏/列；
批量合并/拆分单元格；
拖拽表格顶部的列控制⼯具，可改变相应表格列的宽度。
使⽤须知
quill-better-table 基于quilljs 2.0版本实现，quilljs 2.0版⽬前并未发布稳定版，须谨慎选择使⽤（O(∩_∩)O~我已经把2.0⽤到⽣产环quill-better-table
境了，hold住）。
由于我使⽤webpack externals指定外部引⼊依赖的⽅式打包，所以请务必将Quill对象暴露到window对象上，或者通过script标签的⽅式引⼊quilljs，以便quill-better-table获取依赖。
安装
npm install quill-better-table
复制代码
⽤法
1. 加载外部依赖：
<script src="cdnjs.cloudflare/ajax/libs/quill/2.0.0-dev.3/quill.min.js" type="text/javascript"></script>
复制代码
<link href="cdnjs.cloudflare/ajax/libs/quill/2.0.0-dev.3/quill.snow.min.css" rel="stylesheet"
>
<link href="unpkg/quill-better-table@1.1.0/dist/quill-better-table.css" rel="stylesheet">
复制代码
2. ES6具体⽤法：
import QuillBetterTable from 'quill-better-table'
'modules/better-table': QuillBetterTable
}, true)
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 = Module('better-table')
tableModule.insertTable(3, 3)
}
}
复制代码
模块API
⾸先，可以使⽤Module(module_name)获取quill-better-table:
let tableModule = Module('better-table')
复制代码
获取传⼊range位置的表格信息，返回⼀个装有当前TableContainer, TableRow, TableCell, offset的数组。
// [TableContainer, TableRow, TableCell, 0]
复制代码
tableModule.insertTable(rows: Number, columns: Number)
在光标位置插⼊新的表格
tableModule.insertTable(3, 3)
复制代码
模块配置项
右键功能菜单（operationMenu）的选项配置：
quill-better-table只提供了右键功能菜单（operationMenu）
⽬前quill-better-table
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
<表⽰功能在右键菜单中的按钮的⽂字，可以根据需要配置按钮⽂字。
最后
如果quill-better-table能够帮助到您，希望您能通过回复、邮件或提出你宝贵的建议，我会继续努⼒，不断完善它的。后续计划通过另⼀篇⽂章来具体讲解⼀下quill-better-table的核⼼原理。
对了对了，别忘了github右上⾓的⼩星星哟~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。