Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soccerloway/quill-better-table
Module for better table in Quill, more useful features are supported.
https://github.com/soccerloway/quill-better-table
javascript quill quill-better-table quill-table quilljs quilljs-table table
Last synced: 3 months ago
JSON representation
Module for better table in Quill, more useful features are supported.
- Host: GitHub
- URL: https://github.com/soccerloway/quill-better-table
- Owner: soccerloway
- License: mit
- Created: 2019-03-26T15:14:35.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-09T03:40:43.000Z (6 months ago)
- Last Synced: 2024-10-26T19:49:41.465Z (3 months ago)
- Topics: javascript, quill, quill-better-table, quill-table, quilljs, quilljs-table, table
- Language: JavaScript
- Size: 302 KB
- Stars: 317
- Watchers: 11
- Forks: 121
- Open Issues: 59
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-quill - quill-better-table - A module for table editting, support resizing column, multiline cell, merging/unmerging cells (Uncategorized / Uncategorized)
README
# quill-better-table
A module for better table in Quill, more useful features are supported. There is a list of features below. Thanks [quilljs](https://quilljs.com/) for its awesome extensibility. Hope that quill-better-table could help you.
# Online Demo
[quill-better-table Codepen Demo](https://codepen.io/soccerloway/pen/WWJowj)
# 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](https://github.com/quilljs/quill) 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
```
```
```
```
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([email protected]) or Contribute on [Issues](https://github.com/soccerloway/quill-better-table/issues), I glad to hear your suggestion.
# License
[MIT License](https://rmm5t.mit-license.org/)