quill-table-better

quill-table-better

一个增强Quill编辑器表格功能的插件，如果对你有帮助的话请给我的GitHub项目加个⭐。

功能

1. 列

• 向左插入列

• 向右插入列

• 删除列

2. 行

• 在上面插入行

• 在下面插入行

• 删除行

3. 单元格合并与拆分

• 合并单元格

• 拆分单元格

4. 表格属性设置

• 表格属性

• 单元格属性

5. 在表格外插入段落

• 在表格前面插入段落

• 在表格后面插入段落

6. 拖拽表格改变表格大小或者单元格大小

• 改变单元格大小

鼠标移动到单元格边界上，出现蓝线后拖动改变单元格大小

• 改变表格整体大小

鼠标移动到表格上，表格右下角会出现拖动方块，用来改变表格整体大小

Demo

quill-table-better Codepen Demo

依赖

quill.js >= v2.0.0

快速开始

注意：setContents会导致表无法正确显示，请用updateContents替换。方法如下（初始化数据时使用）：

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>

配置

language

language 有两种写法:

1. 字符串类型, 默认是en_US

语言	值
中文	zh_CN
英语	en_US
法语	fr_FR
波兰语	pl_PL

2. 对象类型，用于注册新语言，例如： { name: 'en_UK', content: en_US } (content 请参考 en_US)

menus

menus用于配置操作栏，不在数组中的菜单不会显示，空数组或无配置默认全部显示。

操作栏的功能如下：

1. column
   • 向左插入列
   • 向右插入列
   • 删除列
2. row
   • 在上面插入行
   • 在下面插入行
   • 删除行
3. merge
   • 合并单元格
   • 拆分单元格
4. table
   • 表格属性
5. cell
   • 单元格属性
6. wrap (在表格外插入段落)
   • 在表格前面插入
   • 在表格后面插入
7. delete
   • 删除表格

toolbarTable

toolbarTable表示在工具栏上添加表格插入按钮（true或false），table better需要添加到工具栏选项中，例如：

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

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

表格支持的格式

表格支持以下格式，并且支同时操作多个单元格：

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

仅支持单个单元格的格式设置：

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

插件暴露的方法

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

deleteTable

module.deleteTable();

deleteTableTemporary、hideTools

当您需要向服务器提交数据（html字符串的形式或delta数据结构的形式）时，您应该使用此功能，例如：

// 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())

函数返回 [table, row, cell, offset]

module.getTable();

insertTable(rows: number, columns: number)

module.insertTable(3, 3);

npm安装

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>