Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zzxming/quill-table
Module for table in quill
https://github.com/zzxming/quill-table
Last synced: about 2 months ago
JSON representation
Module for table in quill
- Host: GitHub
- URL: https://github.com/zzxming/quill-table
- Owner: zzxming
- License: mit
- Created: 2023-11-04T13:59:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-24T09:41:07.000Z (3 months ago)
- Last Synced: 2024-10-27T16:03:57.846Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.31 MB
- Stars: 6
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# QuillJS table
A table module used in [email protected]
[Demo](https://zzxming.github.io/quill-table/demo/index.html)
[[email protected] table module](https://github.com/zzxming/quill-table-up)
# Install
```
npm install quill1.3.7-table-module
```
# Usage
```javascript
import Quill from 'quill';
import TableHandler, { rewirteFormats } from 'quill1.3.7-table-module';
import 'quill1.3.7-table-module/dist/index.css';
Quill.register({ [`modules/${TableHandler.moduleName}`]: TableHandler }, true);
rewirteFormats();
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: [TableHandler.toolName],
[`${TableHandler.moduleName}`]: {
fullWidth: true,
customButton: 'Custom Table',
},
},
});
```
# rewirteFormats
To handle exceptions, it is necessary to rewrite some native formats. you can skip this function. but the relevant format may be displayed incorrectly in the table
## rewrite formats
| format | description |
| -------- | -------------------------------------------------------------------------- |
| ListItem | Rewrite method `replaceWith`. Make ul/ol to display correctly within cells |
# Options
| attribute | description | type | default |
| ------------- | --------------------------------------------------------------------------------------- | -------------------- | ---------------- |
| fullWidth | Always 100% width | `boolean` | `false` |
| customSelect | Custom picker element. The returned element needs to trigger an event to create a table | `() => HTMLElement` | - |
| tableToolTip | Table tool tip configuration | `ToolTip` | - |
| operationMenu | OTable contextmenu configuration | `perationMenu` | - |
| selection | Table cell selection configuration | `TableCellSelection` | - |
| dragResize | Enable table cell width dragger | `boolean` | `true` |
| customButton | Define a label for the custom table button | `string` | `'自定义行列数'` |
## fullWidth
If the value is true. the width of the table is always 100%
## customSelect
The element returned by the customSelect method will be inserted into the toolbar, and the element needs to trigger a custom event `TableModule.createEventName` and carry data `{ row: number, col: number }` in the detail
### ToolTip
| attribute | description | type | default |
| ---------------- | ------------------------------------ | ---------- | ------- |
| tipHeight | Slider height | `number` | `12px` |
| disableToolNames | Disabled tools name within the table | `string[]` | - |
### OperationMenu
| attribute | description | type | default |
| ------------ | ------------------------ | ------------------------------------ | ------------- |
| items | Contextmenu item | `Record` | `defaultMenu` |
| replaceItems | Replace contextmenu item | `Boolean` | `false` |
| modifyItems | Modify contextmenu items | `Boolean` | `false` |
default value
```js
const defaultMenu = {
insertColumnLeft: {
text: '在左侧插入一列',
handler() {},
},
insertColumnRight: {
text: '在右侧插入一列',
handler() {},
},
insertRowTop: {
text: '在上方插入一行',
handler() {},
},
insertRowBottom: {
text: '在下方插入一行',
groupEnd: true,
handler() {},
},
removeCol: {
text: '删除所在列',
handler() {},
},
removeRow: {
text: '删除所在行',
handler() {},
},
removeTable: {
text: '删除表格',
groupEnd: true,
handler() {},
},
mergeCell: {
text: '合并单元格',
handler() {},
},
splitCell: {
text: '拆分单元格',
groupEnd: true,
handler() {},
},
setBackgroundColor: {
text: '设置背景颜色',
isColorChoose: true,
handler(color) {},
},
clearBackgroundColor: {
text: '清除背景颜色',
handler() {},
},
setBorderColor: {
text: '设置边框颜色',
isColorChoose: true,
handler(color) {},
},
clearBorderColor: {
text: '清除边框颜色',
handler() {},
},
};
```
#### OpertationMenuItem
| attribute | type | description |
| ------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| text | `string / () => HTMLElement \| HTMLElement[]` | Item text or the nodes to append to the item. |
| iconSrc | `HTMLString` | Pre icon |
| handler | `() => void / (color) => void` | Click event or color input event. handler |
| subTitle | `string` | Subtitle |
| groupEnd | `boolean` | Group underline. Do not display underline for the last item |
| isColorChoose | `boolean` | Set this true will make this item as color choose item. `handler` will be called when color trigger input event |
### TableCellSelection
| attribute | description | type | default |
| ------------ | ------------ | -------- | --------- |
| primaryColor | Border color | `string` | `#0589f3` |