如何将QUILL text editor存储的HTML格式内容转为普通文本展示

问题根因 #

你遇到的是HTML二次转义问题：
从你贴的返回数据可以看到，标签<p>被转成了<p>，相当于转义了两次：第一次把<转成<，第二次又把<里的&转成了&。你直接用[innerHTML]渲染时只会解析一层转义，最终页面只会显示<p>mcq-1 Q</p>的明文，不会被解析为HTML标签。

解决方案 #

方案1：前端临时修复（快速生效，适合后端暂时无法调整的场景） #

你可以自行实现一层转义解析逻辑，先把二次转义的内容还原为正常HTML字符串，再交给innerHTML渲染。
以下是你当前用的Angular框架的适配示例：

1. 在对应组件中添加转义解析方法：

decodeHtml(str: string) {
  const tempElem = document.createElement('textarea');
  tempElem.innerHTML = str;
  return tempElem.value;
}

2. 修改模板绑定逻辑，先调用解析方法再渲染：

<div class="card p-3 mb-3" [innerHTML]="decodeHtml(mcq.question)"></div>

如果是Vue、React等其他框架，逻辑完全一致，只需将解析后的内容传入对应框架的HTML渲染属性即可。

方案2：后端根治（推荐，从根源避免同类问题） #

这个问题本质是数据存储或接口返回阶段多做了一次HTML转义导致的，直接调整后端逻辑即可：

• 排查Quill内容入库的处理逻辑，不要重复做HTML转义
• 排查接口序列化返回的配置，不要对HTML内容做二次转义
• 保证最终返回给前端的question、answer字段的值是<p>mcq-1 Q</p>格式，而非带&的二次转义内容

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