如何在Quill编辑器使用clipboard.dangerouslyPasteHTML保留自定义CSS类？

Quill默认会过滤掉未在其Blot系统中注册的自定义CSS类，要保留perso-class可以通过以下两种方式配置：

方法1：自定义Block Blot（推荐） #

继承Quill默认的段落Blot，明确允许perso-class类：

// 导入Quill和默认的Block Blot
const Quill = require('quill');
const Block = Quill.import('blots/block');

// 自定义段落Blot
class CustomParagraph extends Block {
  // 读取节点的类名并返回
  static formats(node) {
    const className = node.getAttribute('class');
    return className === 'perso-class' ? className : super.formats(node);
  }

  static blotName = 'custom-paragraph';
  static tagName = 'P';
  static className = 'perso-class';
}

// 注册自定义Blot到Quill
Quill.register(CustomParagraph, true);

配置完成后执行粘贴代码，perso-class即可被保留：

let content= '<p class="perso-class">test</p>'; 
quill.clipboard.dangerouslyPasteHTML(content);

方法2：使用Clipboard模块的Matcher #

通过拦截Clipboard的处理逻辑，手动为段落添加类：

// 获取Quill的Clipboard模块
const clipboard = quill.getModule('clipboard');

// 添加匹配器处理p标签
clipboard.addMatcher('p', (node, delta) => {
  const className = node.getAttribute('class');
  if (className === 'perso-class') {
    // 为delta添加class属性
    delta.attributes = { ...delta.attributes, class: className };
  }
  return delta;
});

方法1符合Quill的Blot设计规范，适合长期使用；方法2更灵活，适合临时处理特定类。

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