Vue3组合式API下Quill编辑器Delta对象转HTML显示的问题

问题出在你用的<quill-editor>组件默认通过v-model:content绑定的是Delta格式的对象，不是直接的HTML字符串——所以直接把这个对象传给v-html会被转成[object Object]，插值显示的自然就是Delta的结构。

给你两种实用的解决办法：

方法一：直接绑定HTML格式内容 #

给<quill-editor>添加content-type="html"属性，让组件直接把编辑内容以HTML字符串的形式绑定到newComment上，不用再做转换：

<quill-editor theme="snow" v-model:content="newComment" content-type="html"></quill-editor>

你的newComment还是用const newComment = ref('')声明，之后直接用<div v-html="newComment"></div>就能正常渲染带格式的评论了。

方法二：Delta转HTML（保留Delta数据） #

如果需要保留Delta对象（比如要存到数据库方便后续编辑评论），可以在展示时把Delta转换成HTML：

<script setup>
import { ref } from 'vue'
import Quill from 'quill'

const newComment = ref({ ops: [] }) // 这里绑定的是Delta对象

// 把Delta转换成HTML的工具方法
const deltaToHtml = (delta) => {
  const tempQuill = new Quill(document.createElement('div'))
  tempQuill.setContents(delta)
  return tempQuill.root.innerHTML
}
</script>

<template>
  <quill-editor theme="snow" v-model:content="newComment"></quill-editor>
  <!-- 展示时调用转换方法 -->
  <div v-html="deltaToHtml(newComment)"></div>
</template>

注意事项 #

• 方法一更简单，适合只需要展示HTML的场景；方法二适合需要保留Delta数据用于后续编辑的场景。
• 使用v-html时要注意防范XSS攻击，建议对用户输入的内容做安全过滤。

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