quill1.3.7-table-module-custom v1.4.3

QuillJS table

A table module used in QuillJS@1.3.7

Demo

Quill@2.x table module

Install

npm install quill1.3.7-table-module

Usage

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

Options

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

OperationMenu

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

TableCellSelection