React Quill编辑器内插入带ID的HTML元素未在DOM中渲染问题

问题根因 #

Quill内置了内容净化机制，默认会做两个处理：

• 剥离不在官方白名单内的DOM属性，你给span添加的id属性会被默认清除
• 自动移除没有内容的空行内节点，空的<span>会被直接过滤掉

可行解决方案 #

方案1：自定义Blot保留span的id属性（推荐，安全性高） #

通过扩展Quill的Blot节点规则，让Quill识别并保留带id的span节点，操作步骤如下：

1. 注册自定义span格式：

import Quill from 'quill';
const Inline = Quill.import('blots/inline');

class IdSpan extends Inline {
  static create(value) {
    const node = super.create(value);
    // 保留id属性
    if (value?.id) {
      node.setAttribute('id', value.id);
    }
    // 插入零宽空格占位，避免空span被清理
    node.append(document.createTextNode('\u200B'));
    return node;
  }

  static formats(node) {
    return {
      id: node.getAttribute('id')
    };
  }
}
IdSpan.blotName = 'id-span';
IdSpan.tagName = 'span';
Quill.register(IdSpan, true);

2. 插入对应节点时，你可以直接用带零宽空格的span字符串赋值给状态，插入格式为：
   const newContent = 原有内容 + '<span id="incInsert">\u200B</span>'

方案2：临时关闭内容净化（仅适用于完全信任输入内容的场景） #

如果不想自定义Blot，也可以直接关闭Quill的内容净化规则，同时给空span加零宽空格占位，配置如下：

const quillModules = {
  clipboard: {
    // 关闭内容净化，存在XSS风险，仅在所有输入内容都可控的场景使用
    sanitize: false,
    matchVisual: false
  },
  // 保留你原有toolbar等其他配置
  toolbar: [
    // ...你的工具栏配置
  ]
}

// 组件引用时传入配置
<ReactQuill
  value={editorContent}
  onChange={setEditorContent}
  modules={quillModules}
/>

// 插入span的格式要加零宽空格
const insertSpan = '<span id="incInsert">\u200B</span>'

优化建议 #

不推荐使用document.getElementById直接操作富文本编辑器内的DOM，会导致Quill内部状态和DOM内容不同步，后续可能出现内容丢失、更新异常的问题，更推荐直接操作存在state中的富文本字符串：

// 向指定span插入内容的逻辑
const addContentToSpan = (insertHtml) => {
  setEditorContent(prevContent => {
    return prevContent.replace(
      /<span id=['"]incInsert['"]>.*?<\/span>/g,
      `<span id="incInsert">${insertHtml}</span>`
    )
  })
}

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