quill-table-better

A module that enhances the table functionality of Quill.

Compare the advantages of other table plugins

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

Demo

Dependencies

quill.js >= v2.0.0

Quickstart

Note: setContents causes the table to not display properly, replace with updateContents. The method is as follows (Used when initializing data):

const delta = quill.clipboard.convert({ html });
const [range] = quill.selection.getRange();
quill.updateContents(delta, Quill.sources.USER);
quill.setSelection(
  delta.length() - (range?.length || 0),
  Quill.sources.SILENT
);
quill.scrollIntoView();

npm

import QuillTableBetter from 'quill-table-better';
import 'quill-table-better/dist/quill-table-better.css'

Quill.register({
  'modules/table-better': QuillTableBetter
}, true);

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['table-better']
];

const options = {
  theme: 'snow',
  modules: {
    table: false,
    toolbar: toolbarOptions,
    'table-better': {
      language: 'en_US',
      menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete'],
      toolbarTable: true
    },
    keyboard: {
      bindings: QuillTableBetter.keyboardBindings
    }
  }
};

const quill = new Quill('#root', options);

cdn

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

<div id="root"></div>
<script>
  Quill.register({
    'modules/table-better': QuillTableBetter
  }, true);

  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['table-better']
  ];

  const options = {
    theme: 'snow',
    modules: {
      table: false,
      toolbar: toolbarOptions,
      'table-better': {
        language: 'en_US',
        menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete'],
        toolbarTable: true
      },
      keyboard: {
        bindings: QuillTableBetter.keyboardBindings
      }
    }
  };
  const quill = new Quill('#root', options);
</script>

Conifg

language

The language parameter has two types:

string, default en_US

Language	Code
Chinese	zh_CN
English	en_US
French	fr_FR
Polish	pl_PL

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:

column

Insert column left
Insert column right
Delete column

Insert row above
Insert row below
Delete row

merge

Merge cells
Split cell

table

Table properties

cell

Cell properties

wrap (Insert paragraph outside the table)

Insert before
Insert after

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:

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['table-better']
];

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

Formats supported by table

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

const WHITE_LIST = [
  'bold',
  'italic',
  'underline',
  'strike',
  'size',
  'color',
  'background',
  'font',
  'list',
  'header',
  'align'
];

Only supports formatting for a single cell.

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

Methods

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：

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

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

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

Function return [table, row, cell, offset]

module.getTable();

insertTable(rows: number, columns: number)

module.insertTable(3, 3);

Download

npm i quill-table-better

CDN

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

attoae/quill-table-better