Vue 3 将 Quill 编辑器 Delta 对象的输出转换为 Html 并显示 Html

Question

我正在设计一个应用程序，用户可以使用富文本编辑器进行评论，并且这些评论会显示为 html 对象。

这是接受评论的代码：

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

地点：

const newComment = ref('')

现在假设我想显示评论（同时考虑输入的所有功能，例如项目符号点或粗体文本），我有这个元素

<div v-html="newComment"></div>

但是这个div的输出是

[object Object]

，不是我预期的。或者，如果我写

<div>{{newComment}}</div>

我只会得到一个像

{ "ops": [ { "insert": "aaa\n" } ] } 

这样的 Delta 对象。

我阅读了文档和类似的代码。有一些现有代码，但我找不到 Vue 3 组合 API 案例。

Answer 1

您必须指定内容类型。

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

它会起作用的