quill-table-better

A module that enhances the table functionality of Quill.

Compare the advantages of other table plugins

1. Supports multiple formats (include list).
2. Supports simultaneous operations on multiple cells.
3. Undo/History not break table.
4. Support language switching.
5. The toolbar provides button for inserting table.

Demo

quill-table-better Codepen Demo

Dependencies

quill.js ">= v2.0.0"

Quickstart

$\color{red}{notice}$

1const delta = quill.clipboard.convert({
2  html,
3  text: '\n'
4})
5quill.setContents(delta, Quill.sources.USER);
6
7// The above method causes the table to not display properly
8// Please use the following method instead
9const [range] = quill.selection.getRange();
10quill.updateContents(delta, Quill.sources.USER);
11quill.setSelection(
12  delta.length() - range.length,
13  Quill.sources.SILENT,
14);
15quill.scrollIntoView();

npm

1import QuillTableBetter from 'quill-table-better';
2import 'quill-table-better/dist/quill-table-better.css'
3
4Quill.register({
5  'modules/table-better': QuillTableBetter
6}, true);
7
8const options = {
9  theme: 'snow',
10  modules: {
11    table: false,
12    'table-better': {},
13    keyboard: {
14      bindings: QuillTableBetter.keyboardBindings
15    }
16  }
17};

cdn

1<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
2<link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet" />
3<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
4<script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>
5
6<div id="root"></div>
7<script>
8  Quill.register({
9    'modules/table-better': QuillTableBetter
10  }, true);
11
12  const toolbarOptions = [
13    ['bold', 'italic', 'underline', 'strike'],
14    ['table-better']
15  ];
16
17  const options = {
18    theme: 'snow',
19    modules: {
20      table: false,
21      toolbar: toolbarOptions,
22      'table-better': {
23        toolbarTable: true
24      },
25      keyboard: {
26        bindings: QuillTableBetter.keyboardBindings
27      }
28    }
29  };
30  const quill = new Quill('#root', options);
31</script>

Conifg

language

The 'language' parameter has two types:

1. string, 'en_US' or 'zh_CN', default 'en_US'
2. Used to register a new language, such as: { name: 'en_UK', content: en_US } (For content, please refer to en_US)

menus

'menus' are used to configure the action bar, and those not in the array are not displayed. Empty array or no configuration default all display.

The functions of the operation bar are as follows:

1. column

• Insert column left
• Insert column right
• Delete column

2. row

• Insert row above
• Insert row below
• Delete row

3. merge

• Merge cells
• Split cell

4. table

• Table properties

5. cell

• Cell properties

6. wrap (Insert paragraph outside the table)

• Insert before
• Insert after

7. delete

• Delete table

toolbarTable

'toolbarTable' is used to add a button to insert a table on the toolbar (true or false). And 'table-better' needs to be added to toolbarOptions, for example:

1const toolbarOptions = [
2  ['bold', 'italic', 'underline', 'strike'],
3  ['table-better']
4];

1'table-better': {
2  language: 'en_US',
3  menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete'],
4  toolbarTable: true
5}

Formats supported by table

The table supports the following formats and supports simultaneous operations on multiple cells：

1const WHITE_LIST = [
2  'bold',
3  'italic',
4  'underline',
5  'strike',
6  'size',
7  'color',
8  'background',
9  'font',
10  'list',
11  'header',
12  'align'
13];

Only supports formatting for a single cell.

1const SINGLE_WHITE_LIST = ['link', 'image'];

Methods

1 const module = quill.getModule('table-better');

deleteTable

module.deleteTable();

deleteTableTemporary、hideTools

When you need to submit data(html or delta) to the server, you should use this function,for example：

1// Delta
2module.hideTools();
3const delta = quill.getContents();
4axios.post(url, delta);

1// HTML
2module.deleteTableTemporary();
3const html = quill.getSemanticHTML();
4axios.post(url, html);

getTable(range = this.quill.getSelection())

Function return '[table, row, cell, offset]'

1module.getTable();

insertTable(rows: number, columns: number)

1module.insertTable(3, 3);

Download

1npm i quill-table-better

CDN

1<link
2  href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css"
3  rel="stylesheet"
4/>
5<script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>