quill-table-better

attoae

已于 2024-10-13 11:26:40 修改

阅读量1.9k

点赞数 33

文章标签：前端 github

于 2024-06-26 14:38:58 首次发布

本文链接：https://blog.csdn.net/attoae/article/details/139987216

版权

quill-table-better

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

功能

列
- 向左插入列
- 向右插入列
- 删除列
行
- 在上面插入行
- 在下面插入行
- 删除行
单元格合并与拆分
- 合并单元格
- 拆分单元格
表格属性设置
- 表格属性
- 单元格属性
在表格外插入段落
- 在表格前面插入段落
- 在表格后面插入段落
删除表格
拖拽表格改变表格大小或者单元格大小
- 改变单元格大小
  鼠标移动到单元格边界上，出现蓝线后拖动改变单元格大小
- 改变表格整体大小
  鼠标移动到表格上，表格右下角会出现拖动方块，用来改变表格整体大小

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 有两种写法:

字符串类型, 默认是en_US

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

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

menus

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

操作栏的功能如下：

column

向左插入列
向右插入列
删除列

row

在上面插入行
在下面插入行
删除行

merge

合并单元格
拆分单元格

table

表格属性

cell

单元格属性

wrap (在表格外插入段落)

在表格前面插入
在表格后面插入

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>