Module for better table in Quill, more useful features are supported.
npm install quill-better-tableReplace TableCellLine.tagName from DIV to P. Using DIV to implement TableCellLine led a copy/paste issue: #50. There are many more similar situations. When the user pastes the DIV tag into the editor, the DIV will be treated as a TableCellLine.
Press Enter to add new lines in the table cell now.
Right-click on table to open context menu, you can see the button.
Right-click on table to open context menu, you can see the button.
Right-click on table to open context menu, you can see the button.
Right-click on table to open context menu, you can see the button.
Dragging over the table cells could select the tableCells surrounded by the highlight borders.
Right-click on table to open context menu, you can see the button.
Dragging lines between the top tool for columns could resize width of columns.
Right-click on table to open context menu, you can see the button.
Since I use webpack externals to bundle, you must expose Quill to window object, like load quill.js by script tag globally. Or you may need to fork this repo and build what you need.
npm install quill-better-table
`Usage
Load quill and style dependencies
`
`
`
`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)
}
}
`Module methods
first, you can get quill-better-table module by quill.getModule
`
let module = quill.getModule('better-table')
`
module.getTable(range = quill.getSelection())
get an array with TableContainer, TableRow, TableCell, offset through the given range.
`
module.getTable() // current selection
module.getTable(range)
// [TableContainer, TableRow, TableCell, 0]
`module.insertTable(rows: Number, columns: Number)
insert table at current position
`
module.insertTable(3, 3)
`Module Options
quill-better-table only provide operation options now.
`
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
table: false, // disable table module
'better-table': {
operationMenu: {
items: {
unmergeCells: {
text: 'Another unmerge cells name'
}
},
color: {
colors: ['#fff', 'red', 'rgb(0, 0, 0)'], // colors in operationMenu
text: 'Background Colors' // subtitle
}
}
},
keyboard: {
bindings: QuillBetterTable.keyboardBindings
}
}
})
`
operationMenu
OperationMenu configures the operation list in right-click menu.operationMenu.items
operationMenu show all operations as default. false will remove the operation.
`
{
operationKey: {
text: 'foo'
}, operationKey: false
}
`
operationKey is the name of operation, there is a list below:
- insertColumnRight
- insertColumnLeft
- insertRowUp
- insertRowDown
- mergeCells
- unmergeCells
- deleteColumn
- deleteRow
- deleteTable
You may need to modify the menu text,
operationKey.text will do that.operationMenu.color
Background colors is optional, the default is hidden. If you need this feature, use this configure.
`
{
colors: ['#fff', 'red', 'rgb(0, 0, 0)'], // colors you need in operationMenu, ['white', 'red', 'yellow', 'blue'] as default
text: 'Background Colors' // subtitle, 'Background Colors' as default
}
``