Quill编辑器自动移除表格标签，求助如何保留原始HTML代码

Quill默认不支持<table>、<thead>、<tr>、<th>、<td>这类表格标签，切换可视化模式时会自动丢弃不识别的标签，导致原始代码丢失。要实现保留原始表格代码并正常编辑，可通过以下方式解决：

1. 自定义表格相关Blots #

通过Quill的Blot API注册表格对应的自定义元素，让Quill能够识别并处理这些标签：

// 引入Quill核心模块
const Block = Quill.import('blots/block');
const Container = Quill.import('blots/container');

// 定义表格容器（对应<table>）
class TableContainer extends Container {}
TableContainer.blotName = 'table';
TableContainer.tagName = 'TABLE';
TableContainer.className = 'quill-table';

// 定义表头行（对应<thead>下的<tr>）
class TableHeaderRow extends Container {}
TableHeaderRow.blotName = 'table-header-row';
TableHeaderRow.tagName = 'TR';
TableHeaderRow.className = 'quill-table-header-row';

// 定义表格行（对应<tbody>下的<tr>）
class TableRow extends Container {}
TableRow.blotName = 'table-row';
TableRow.tagName = 'TR';
TableRow.className = 'quill-table-row';

// 定义表头单元格（对应<th>）
class TableHeaderCell extends Block {}
TableHeaderCell.blotName = 'table-header-cell';
TableHeaderCell.tagName = 'TH';
TableHeaderCell.className = 'quill-table-header-cell';

// 定义表格单元格（对应<td>）
class TableCell extends Block {}
TableCell.blotName = 'table-cell';
TableCell.tagName = 'TD';
TableCell.className = 'quill-table-cell';

// 将自定义Blots注册到Quill
Quill.register(TableContainer, true);
Quill.register(TableHeaderRow, true);
Quill.register(TableRow, true);
Quill.register(TableHeaderCell, true);
Quill.register(TableCell, true);

2. 配置HTML解析规则 #

添加HTML标签匹配规则，确保Quill解析HTML时能正确识别表格元素：

const Parchment = Quill.import('parchment');

// 为<table>添加解析匹配
Parchment.registerMatcher('TABLE', (node) => {
  return {
    blotName: 'table',
    attributes: { class: 'quill-table' }
  };
});

// 同理为<tr>、<th>、<td>添加对应匹配规则
Parchment.registerMatcher('TR', (node) => {
  const isHeader = node.parentElement?.tagName === 'THEAD';
  return {
    blotName: isHeader ? 'table-header-row' : 'table-row',
    attributes: { class: isHeader ? 'quill-table-header-row' : 'quill-table-row' }
  };
});

3. 可选：使用社区表格插件 #

如果不想手动编写自定义Blots，可直接使用社区维护的Quill表格插件，这类插件已封装好表格的创建、编辑、HTML解析逻辑，能直接解决标签丢失问题。

4. 临时方案：仅保留原始HTML（无编辑需求） #

如果不需要在可视化模式编辑表格，仅需保留原始代码，可单独用隐藏的<textarea>存储原始HTML内容，切换模式时从该文本域读取代码覆盖Quill的内容，实现原始代码的保留。

内容的提问来源于stack exchange，提问作者Rahul Kumar