1.7.2 • Published 8 months ago
quill1-table v1.7.2
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
1.7.2
8 months ago
1.7.1
8 months ago
1.7.0
8 months ago
1.6.5
10 months ago
1.6.4
1 year ago
1.6.3
1 year ago
1.6.2
2 years ago
1.6.1
2 years ago
1.6.0
2 years ago
1.3.7
2 years ago
1.3.6
2 years ago
1.3.5
2 years ago
1.5.2
2 years ago
1.3.4
2 years ago
1.5.1
2 years ago
1.3.3
2 years ago
1.5.0
2 years ago
1.4.1
2 years ago
1.3.2
2 years ago
1.4.0
2 years ago
1.3.1
2 years ago
1.2.2
2 years ago
1.3.0
2 years ago
1.2.1
2 years ago
1.3.8
2 years ago
1.2.0
2 years ago