如何在Vue.js中正确渲染Quill编辑器生成的格式化HTML字符串

核心原因 #

Vue 默认的双大括号 {{ }} 插值语法会自动转义所有 HTML 内容，目的是避免 XSS 注入风险，因此你存储的 HTML 标签会被当做普通字符串直接渲染，不会被浏览器解析为格式内容。
你之前使用 jQuery 操作不生效的原因是：Vue 是数据驱动渲染，手动通过 jQuery 修改的 DOM 会被 Vue 后续的响应式更新覆盖，无法稳定生效。

可行实现方案 #

方案1：使用 Vue 原生 v-html 指令（最简便） #

v-html 会直接将绑定的内容作为原生 HTML 插入到对应节点中，完全匹配你渲染 Quill 生成富文本的需求，修改你的代码如下：

<div class="card" v-for="(wiki, index) in wikiList" :key="index">
  <div class="mb-3">
    <!-- 替换双大括号为 v-html，修正原代码中错误的 type 属性、input 闭合标签 -->
    <div class="form-control" id="view-container-wiki" readonly v-html="wiki.description"></div>
  </div>
</div>

注意事项：

• 你原有代码存在语法错误：div 标签没有 type 属性，同时错误使用了 </input> 作为闭合标签，属于标签混用，需要按照上述示例修正为正确的 div 闭合格式。
• v-html 存在 XSS 安全风险：如果你存储的富文本完全由 Quill 编辑器生成、没有开放用户自定义原始 HTML 输入的入口，可安全使用；如果允许用户提交自定义 HTML，建议先对 wiki.description 内容做 XSS 消毒处理，比如使用 DOMPurify 库过滤危险标签和属性。

方案2：自定义处理后渲染（仅需额外修改富文本时使用） #

如果需要在渲染前对富文本做自定义调整（比如替换特定标签、统一添加样式类等），可以先在方法中处理 HTML 字符串，再绑定到 v-html 即可：

// Vue 实例方法示例
methods: {
  processRichText(htmlStr) {
    // 此处可添加你的自定义处理逻辑
    return htmlStr
  }
}

模板中调用处理方法即可：

<div v-html="processRichText(wiki.description)"></div>

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