如何在Draftail中使用»及避免&被转义为&

Draftail默认的HTML处理逻辑，会出于XSS防护目的，自动将文本中的&字符转义为&——这个规则本身是安全设计，但会把手写的HTML实体»整个转成纯文本字符串»，最终前端渲染出来就是错误文本，而非预期的»符号。

1. 优先选择零成本方案：直接输入对应Unicode字符 #

绝大多数需要用数字/命名实体表示的特殊字符，都有对应的标准Unicode编码，Draftail本身不会对常规Unicode字符做转义处理。

• 比如你需要的»对应真实字符是»，«对应«，这类字符可以直接复制粘贴到编辑器里，不管是存储还是前端渲染都不会出问题，效果和写实体码完全一致。
• 不需要手动在编辑器的源码模式下输入&#xxx;格式的实体码，源码模式默认会优先转义所有&字符，手动写实体码反而会触发转义逻辑。

2. 确需保留实体码的场景：调整前端解析配置 #

如果业务上确实要求存储的内容里保留»这类实体字符串，不需要完全关闭全局的&转义规则（否则会引入XSS风险），只需要修改Draftail初始化时的HTML解析规则，把需要支持的实体提前映射为对应字符即可：

• 找到项目中初始化Draftail的配置项，自定义parseHtml解析方法，在内容进入Draftail核心解析逻辑之前完成实体替换：

  const editorConfig = {
    // 保留你项目原有的所有配置项
    parseHtml: (rawHtml) => {
      // 按实际需求补充需要支持的实体映射
      const allowedEntities = {
        '»': '»',
        '«': '«',
        ' ': ' ',
      };
      let processedHtml = rawHtml;
      // 提前替换需要支持的实体，绕开默认的&转义逻辑
      Object.entries(allowedEntities).forEach(([entityStr, realChar]) => {
        processedHtml = processedHtml.replaceAll(entityStr, realChar);
      });
      // 将处理后的内容交给Draftail默认解析逻辑
      return window.draftail.getDefaults().parseHtml(processedHtml);
    }
  }
  

注意：不要直接关闭Draftail的全局&转义规则，否则会引入XSS注入的安全风险，只需要针对明确需要支持的实体做提前映射即可。

3. 存储/导出阶段的转义问题排查 #

如果遇到“编辑器内显示正常，但保存后读出来仍是被转义的字符串”的问题，大概率是后端的序列化导出配置存在问题：

• 如果是基于Wagtail集成的Draftail，检查对应富文本字段的导出白名单配置，确保导出时不会把真实的Unicode字符重新转成HTML实体。
• 确认导出器的安全转义逻辑仅针对HTML标签生效，不需要对纯文本内容中的常规字符做额外转义。

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