如何在Quill中正确使用span覆盖Block Blot并解决换行<br>被span包裹的问题

我完全懂你现在的困扰：想把Quill里所有默认块级元素（比如p、table、tr）都换成带data-type属性的span，结果替换Block blot后，按回车生成的<br>也被包在了span里面，自定义的表格相关blot也没按预期生效对吧？我来帮你一步步理顺这些问题：

一、核心问题拆解 #

1. 块级/行内元素冲突：你把原本是块级的Block blot换成了行内的span，Quill的块级布局逻辑被打乱——它默认会在空Block里插入<br>保持可编辑性，而span作为行内元素会直接把<br>包裹进去。
2. Blot层级关系错误：默认的table是容器型Block，tr是它的子Block，你的自定义blot没设置正确的父子层级，导致Quill无法识别它们的容器关系。

二、分步解决方案 #

1. 修正自定义Paragraph Blot：让span表现为块级元素

虽然用span标签，但必须给它加上块级样式，让Quill把它当成标准块级元素处理，这样换行时会创建新的Block容器，而不是在现有span里塞<br>：

const Block = Quill.import('blots/block');

class CustomParagraph extends Block {
  static create() {
    let node = super.create();
    node.setAttribute('data-type', 'p');
    // 关键：强制span表现为块级元素
    node.style.display = 'block';
    node.style.margin = '1em 0'; // 保持段落间距，可选
    return node;
  }
}
CustomParagraph.blotName = 'block';
CustomParagraph.tagName = 'span';
Quill.register(CustomParagraph, true); // 覆盖默认Block

修改后，按回车会生成独立的<span data-type="p">容器，空容器里的<br>是Quill为了保持可编辑性的正常占位，如果你想在导出HTML时去掉它，可以在输出时做过滤。

2. 正确注册表格相关自定义Blot（严格遵守层级）

表格、行、单元格是嵌套的容器关系，必须分别继承对应的Blot类并指定父子关系：

// 自定义Table Blot（容器型，可包含Tr）
class CustomTable extends Block.Container {
  static create() {
    let node = super.create();
    node.setAttribute('data-type', 'table');
    node.style.display = 'table';
    node.style.width = '100%';
    node.style.borderCollapse = 'collapse';
    return node;
  }
}
CustomTable.blotName = 'custom-table';
CustomTable.tagName = 'span';
Quill.register(CustomTable, true);

// 自定义Tr Blot（Table的子Block）
class CustomTableRow extends Block {
  static create() {
    let node = super.create();
    node.setAttribute('data-type', 'tr');
    node.style.display = 'table-row';
    return node;
  }
  // 指定父Blot类型
  static get parent() {
    return 'custom-table';
  }
}
CustomTableRow.blotName = 'custom-tr';
CustomTableRow.tagName = 'span';
Quill.register(CustomTableRow, true);

// 自定义Td Blot（Tr的子容器）
class CustomTableCell extends Block.Container {
  static create() {
    let node = super.create();
    node.setAttribute('data-type', 'td');
    node.style.display = 'table-cell';
    node.style.border = '1px solid #ddd';
    node.style.padding = '8px';
    return node;
  }
  static get parent() {
    return 'custom-tr';
  }
}
CustomTableCell.blotName = 'custom-td';
CustomTableCell.tagName = 'span';
Quill.register(CustomTableCell, true);

这样注册后，Quill就能正确识别表格的层级结构，插入表格时会生成带data-type的span嵌套结构。

3. 优化导出HTML：过滤空段落里的<br>

如果不想在最终HTML里保留空span里的<br>，可以在输出时做替换：

function updateHtmlOutput() {
  let html = quill.root.innerHTML;
  // 过滤空段落里的<br>
  html = html.replace(/<span data-type="p"><br><\/span>/g, '<span data-type="p"></span>');
  document.getElementById('output').textContent = html;
}

4. 完善Clipboard匹配器：支持粘贴内容转换

扩展你的现有匹配器，把粘贴的原生块级元素转换成自定义blot：

quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
  if (node.tagName === 'P') {
    const ops = [];
    // 遍历p标签内的内容，转换为Quill操作
    for (const child of node.childNodes) {
      if (child.nodeType === Node.TEXT_NODE) {
        ops.push({ insert: child.textContent });
      } else if (child.nodeType === Node.ELEMENT_NODE) {
        const format = {};
        if (child.tagName === 'B' || child.tagName === 'STRONG') format.bold = true;
        if (child.tagName === 'I' || child.tagName === 'EM') format.italic = true;
        ops.push({ insert: child.textContent, attributes: format });
      }
    }
    return { ops: ops.concat([{ insert: '\n' }]) };
  }
  // 可继续添加table、tr等元素的转换逻辑
  return delta;
});

三、注意事项 #

• 用span模拟块级元素时，display:block是必须的，否则会出现布局错乱和编辑异常。
• 自定义Blot必须严格遵守Quill的层级规则：容器型Blot继承Block.Container，子Blot要指定parent属性。
• 空段落里的<br>是Quill维持可编辑区域的必要元素，编辑时不要随意移除，只在导出时过滤即可。

备注：内容来源于stack exchange，提问作者NCC-1701-Developer