富文本编辑器表格跨列合并后样式错乱怎么办？

啊，Quill表格合并这个坑我踩过，确实很烦人。根本原因在于合并后浏览器自动重新计算列宽时的逻辑有问题。我来一步步解释怎么解决：

首先，问题出在合并操作后Quill没有正确更新表格的列宽约束。虽然DOM结构是对的，但浏览器渲染时还是按合并前的布局来分配宽度。

解决方案分三步走：

第一步，在合并前记录当前各列的实际宽度。这个很关键，因为合并后我们需要手动维持这个比例：

function getColumnWidths(table) {

  const widths = [];

  const firstRow = table.querySelector('tr');

  firstRow.querySelectorAll('td, th').forEach(cell => {

    widths.push(cell.offsetWidth);

  });

  return widths;

}

第二步，修改你的合并函数，合并后立即修复列宽。这里要注意合并操作是异步的，所以要等下一个tick：

async function mergeCells(start, end) {

  const table = this.quill.getSelection().table;

  const originalWidths = getColumnWidths(table);

  

  // 执行合并

  table.mergeCells(start.row, start.column, end.row - start.row + 1, 'col');

  

  // 等DOM更新完成

  await new Promise(resolve => setTimeout(resolve, 0));

  

  // 重新应用列宽

  const firstRow = table.querySelector('tr');

  let colIndex = 0;

  firstRow.querySelectorAll('td, th').forEach(cell => {

    // 跳过被合并的单元格

    if (colIndex === start.column) {

      colIndex += (end.column - start.column + 1);

      return;

    }

    

    cell.style.width = ${originalWidths[colIndex]}px;

    colIndex++;

  });

}

第三步，处理合并后表格头部的特殊样式。你之前用的format('tableHeader')其实不太够，应该这样：

// 在mergeCells函数最后加上

this.quill.update(Quill.sources.USER);

const tableModule = this.quill.getModule('table');

tableModule._balanceTables(); // 强制重新平衡表格布局

原理其实很简单：Quill的表格模块在合并单元格时，没有正确维护CSS的宽度约束。我们需要手动保存原始宽度，合并后重新应用，最后触发一次完整的表格重计算。

这里有两点要注意：
1. 必须用offsetWidth而不是style.width，因为用户可能通过拖拽改变了列宽
2. setTimeout是必须的，因为合并操作是异步的，直接同步操作DOM会拿不到最新状态

我之前也被这个问题折磨了很久，最后发现Quill的table模块源码里其实有_balanceTables方法，但没在合并操作后自动调用，就很迷...

这个问题我也遇到过，Quill的表格模块确实有点坑。直接改样式没用是因为合并单元格后，浏览器默认会重新计算布局。

你可以试试在合并操作完成后，强制刷新一下表格的布局。给你的代码加一段修正逻辑：

function mergeCells(start, end) {

  const table = this.quill.getSelection().table;

  table.mergeCells(start.row, start.column, end.row - start.row + 1, 'col');

  

  // 强制刷新布局

  setTimeout(() => {

    const tableElement = document.querySelector('.ql-table');

    Array.from(tableElement.querySelectorAll('td')).forEach(cell => {

      cell.style.minWidth = ${cell.offsetWidth}px;

    });

  }, 0);



  this.quill.format('tableHeader', true);

}

这里的 setTimeout 是为了让样式更新延迟到DOM渲染完成之后。虽然不太优雅，但确实能解决问题。

另外提醒一下，Quill的表格功能本身支持有限，如果需求复杂可能要考虑换更专业的富文本编辑器。希望能帮到你！