Skip to content

dclement8/quill1-table

 
 

Repository files navigation

QuillJS Table (quill1-table)

Version Downloads

TABLE functionality in QuillJS (v1) using Containers.

Code of quill is included in project so we can easily play with it in our tests.

Features

  • Add or remove a table/column/row/cell
  • ctrl+z/ctrl+shift+z or cmd+z/cmd+shift+z on Mac (undo/redo)
  • select a cell or multiple cells
  • split/merge cell
  • remove cell/selection
  • copy/paste a table
  • add col/row before/after
  • copy & paste table from Word
  • tabbing between cells
  • select all cell content
  • cell selection on click or with CTRL key (or CMD on Mac)
  • show/hide table border

Usage

see example demo.js

// import module
import TableModule from 'quill1-table';

// register module
Quill.register('modules/table', TableModule);

// add toolbar controls in Toolbar module options
[
  {
    table: TableModule.tableOptions()
  },
  {
    table: [
      'insert',
      'append-row-above',
      'append-row-below',
      'append-col-before',
      'append-col-after',
      'remove-col',
      'remove-row',
      'remove-table',
      'split-cell',
      'merge-selection',
      'remove-cell',
      'remove-selection',
      'undo',
      'redo'
    ]
  }
]

// add module in Quill options
modules: {
  table: {
    // table module options
    cellSelectionOnClick: true // true: cell selection on click, false: cell selection with CTRL key
  },
  // add keyboard bindings in Keyboard options
  keyboard: {
    // Since Quill’s default handlers are added at initialization, the only way to prevent them is to add yours in the configuration.
    bindings: {
      backspace: {
        key: 'backspace',
        handler: function (range, keycontext) {
          return TableModule.keyboardHandler(this.quill, 'backspace', range, keycontext);
        }
      },
      delete: {
        key: 'delete',
        handler: function (range, keycontext) {
          return TableModule.keyboardHandler(this.quill, 'delete', range, keycontext);
        }
      },
      undo: {
        shortKey: true,
        key: 'z',
        handler: function (range, keycontext) {
          return TableModule.keyboardHandler(this.quill, 'undo', range, keycontext);
        }
      },
      redo: {
        shortKey: true,
        shiftKey: true,
        key: 'z',
        handler: function (range, keycontext) {
          return TableModule.keyboardHandler(this.quill, 'redo', range, keycontext);
        }
      }
    }
  }
}

If you use "bubble" theme, it is recommended to display the toolbar on single click, otherwise the selection cannot be kept.

quill.on('selection-change', range => {
  if (range) {
    quill.theme.tooltip.show();
    quill.theme.tooltip.position(quill.getBounds(range));
  }
});

Changelog

see CHANGELOG.md

For development

npm install

npm run build

About

Table functionality for quilljs 1. Forked from https://github.com/acatec/quill-table-tbf which is a fork of original https://github.com/dost/quilljs-table

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 92.0%
  • CSS 8.0%