quill-better-table
A module for better table in Quill, more useful features are supported. There is a list of features below. Thanks quilljs for its awesome extensibility. Hope that quill-better-table could help you.
Online Demo
quill-better-table Codepen Demo
Updated v1.2.10
-
Replace TableCellLine.tagName from `DIV` to `P`. Using `DIV` to implement TableCellLine led a copy/paste issue: Pasting plain text also changes to table format. There are many more similar situations. When the user pastes the DIV tag into the editor, the DIV will be treated as a TableCellLine. Using `P` is more appropriate and fixes the mentioned issue. If this update caused any other new issues, tell me as soon as possible please, thanks! Best wishes.
Features
Clicking on tables in quill editor will initialize the tools for table, all features are based on it.
-
Multiple lines in table cell
Press Enter to add new lines in the table cell now.
-
Add table column left/right
Right-click on table to open context menu, you can see the button.
-
Add table row top/bottom
Right-click on table to open context menu, you can see the button.
-
Remove selected table columns
Right-click on table to open context menu, you can see the button.
-
Remove selected table rows
Right-click on table to open context menu, you can see the button.
-
Selects multiple table cells
Dragging over the table cells could select the tableCells surrounded by the highlight borders.
-
Merge/Unmerge table cells
Right-click on table to open context menu, you can see the button.
-
Resize the width of column
Dragging lines between the top tool for columns could resize width of columns.
-
Delete table
Right-click on table to open context menu, you can see the button.
Requirements
quilljs v2.0.0-dev.3
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.
Installation
npm install quill-better-table
Usage
Load quill and style dependencies
<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="https://unpkg.com/quill-better-table@1.2.8/dist/quill-better-table.css" rel="stylesheet">
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
}
Community
Send me an email(lw54760187@hotmail.com) or Contribute on Issues, I glad to hear your suggestion.