富文本编辑器里怎么合并表格单元格？

司马晨曦提问于 2026-03-16 23:16:19 阅读 26

交互

我用的是 Quill.js 做富文本编辑，现在需要支持表格的单元格合并功能，但官方好像没提供这个 API。

试过直接操作 DOM，比如给 <td> 加 colspan，但一输入内容就还原了，估计是编辑器内部状态没同步。有没有人做过类似的功能？或者有推荐的插件？

我来解答赞 3 收藏

反馈

1 条解答

技术国曼 Lv1

Quill.js 确实没这功能，官方模块 quill-table 也只支持基础的表格操作。直接改 DOM 是行不通的，编辑器每次输入都会重新渲染，你改的 DOM 分分钟被覆盖。

血泪教训：必须从 Parchment 层面入手，改数据模型而不是改视图。

给你两个思路：

一是用现成的扩展库，GitHub 上搜 "quill-table-cell-merge"，有人做过这个，但是维护状态一般，你得自己测试兼容性。

二是自己实现，核心思路是扩展 Table Cell 的 Blot，加一个 merge 方法：

const Cell = Quill.import('formats/table-cell');



Cell.prototype.merge = function(targetCell) {

  const table = this.parent.parent;

  const currentRow = this.parent;

  const targetRow = targetCell.parent;

  

  const currentIndex = currentRow.children.indexOf(this);

  const targetIndex = targetRow.children.indexOf(targetCell);

  

  // 计算 colspan

  const colspan = targetIndex - currentIndex + 1;

  this.attributes.set('colspan', colspan);

  

  // 从 DOM 和 Parchment 中移除被合并的单元格

  targetCell.remove();

};



// 注册快捷键

quill.keyboard.addBinding({

  key: 'm',

  shortKey: true,

  format: ['table-cell']

}, function(range, context) {

  if (context.table && range.index !== context.start.index) {

    const cell = context.table.cellAt(range.index);

    const targetCell = context.table.cellAt(context.start.index);

    cell.merge(targetCell);

  }

});

实际做起来坑很多：合并后光标位置处理、撤销回退、复制粘贴时的 colspan 解析……每个环节都能让你debug到怀疑人生。

我的建议是：如果不是强需求，直接换编辑器吧。TinyMCE 或 CKEditor 对表格支持更成熟，特别是 TinyMCE 的表格插件功能很全，省得自己踩坑。

2026-03-17 23:25