ngx-quill编辑器绑定HTML时自定义元素与类被移除，求解决方案

核心问题分析 #

你当前的自定义Blot继承了Block（块级元素类型），但目标元素是行内的<span>，这种类型不匹配会导致Quill初始化解析HTML时，将不符合块级规则的元素过滤掉。

具体修复步骤 #

1. 修正自定义Blot的继承类 #

将继承的Block替换为行内元素对应的Inline，确保Blot类型与目标标签一致：

// 替换原Block导入，改为行内Blot基类
var Inline = Quill.import('blots/inline');

class MyThing extends Inline {}
MyThing.blotName = 'my-thing';
MyThing.className = 'my-thing';
MyThing.tagName = 'span';

// 加上true参数强制注册，避免潜在的命名冲突
Quill.register(MyThing, true);

2. 确保Blot注册时机优先 #

在组件的ngOnInit钩子中执行Blot注册代码，必须早于编辑器初始化，否则编辑器启动时无法识别自定义格式，会直接过滤掉未知元素：

ngOnInit(): void {
  // 在这里执行自定义Blot的注册逻辑
  var Inline = Quill.import('blots/inline');
  class MyThing extends Inline {}
  MyThing.blotName = 'my-thing';
  MyThing.className = 'my-thing';
  MyThing.tagName = 'span';
  Quill.register(MyThing, true);

  // 初始化HTML内容
  this.htmlText = '<span class="my-thing"><a href="http://help.com" rel="noopener noreferrer" target="_blank">help.com</a></span>';
}

3. 配置剪贴板匹配器增强解析 #

添加clipboard模块的matchers规则，手动识别带自定义类的span元素，确保初始化时能正确解析为自定义格式：

this.modules = {
  toolbar: {
    container: [['my-thing']]
  },
  clipboard: {
    matchers: [
      [Node.ELEMENT_NODE, (node: Element, delta) => {
        if (node.tagName === 'SPAN' && node.classList.contains('my-thing')) {
          // 将匹配到的span转换为自定义Blot格式
          return delta.insert({ 'my-thing': true });
        }
        return delta;
      }]
    ]
  }
};

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