QuillJS Table (quill1-table)
TABLE functionality in QuillJS (v1) using Containers.
Code of quill is included in project so we can easily play with it in our tests.
Features
- Add or remove a table/column/row/cell
- ctrl+z/ctrl+shift+z or cmd+z/cmd+shift+z on Mac (undo/redo)
- select a cell or multiple cells
- split/merge cell
- remove cell/selection
- copy/paste a table
- add col/row before/after
- copy & paste table from Word
- tabbing between cells
- select all cell content
- cell selection on click or with CTRL key (or CMD on Mac)
- show/hide table border
Usage
see example demo.js
// import module
import TableModule from 'quill1-table';
// register module
Quill.register('modules/table', TableModule);
// add toolbar controls in Toolbar module options
[
{
table: TableModule.tableOptions()
},
{
table: [
'insert',
'append-row-above',
'append-row-below',
'append-col-before',
'append-col-after',
'remove-col',
'remove-row',
'remove-table',
'split-cell',
'merge-selection',
'remove-cell',
'remove-selection',
'undo',
'redo'
]
}
]
// add module in Quill options
modules: {
table: {
// table module options
cellSelectionOnClick: true // true: cell selection on click, false: cell selection with CTRL key
},
// add keyboard bindings in Keyboard options
keyboard: {
// Since Quill’s default handlers are added at initialization, the only way to prevent them is to add yours in the configuration.
bindings: {
backspace: {
key: 'backspace',
handler: function (range, keycontext) {
return TableModule.keyboardHandler(this.quill, 'backspace', range, keycontext);
}
},
delete: {
key: 'delete',
handler: function (range, keycontext) {
return TableModule.keyboardHandler(this.quill, 'delete', range, keycontext);
}
},
undo: {
shortKey: true,
key: 'z',
handler: function (range, keycontext) {
return TableModule.keyboardHandler(this.quill, 'undo', range, keycontext);
}
},
redo: {
shortKey: true,
shiftKey: true,
key: 'z',
handler: function (range, keycontext) {
return TableModule.keyboardHandler(this.quill, 'redo', range, keycontext);
}
}
}
}
}
If you use "bubble" theme, it is recommended to display the toolbar on single click, otherwise the selection cannot be kept.
quill.on('selection-change', range => {
if (range) {
quill.theme.tooltip.show();
quill.theme.tooltip.position(quill.getBounds(range));
}
});
Changelog
see CHANGELOG.md
For development
npm install
npm run build