vue3 富文本内容回显

在 Vue3 中，我们可以使用第三方库如 `vue-quill-editor` 或 `tinymce-vue` 来实现富文本编辑器的功能。对于回显已有的富文本内容，我们可以将内容存储在数据中，然后在 `mounted` 钩子函数中初始化编辑器，并将数据传递给编辑器组件。

以 `vue-quill-editor` 为例，假设我们有一个 `content` 数据存储了富文本内容，可以通过以下步骤实现内容的回显：

1. 安装 `vue-quill-editor`，具体可以参考官方文档。

2. 在页面中引入 `vue-quill-editor` 组件，并绑定 `content` 数据：

<template>
  <div>
    <quill-editor v-model="content"></quill-editor>
  </div>
</template>

<script>
import { QuillEditor } from 'vue-quill-editor'

export default {
  components: {
    QuillEditor
  },
  data () {
    return {
      content: '<p>Hello world!</p>'
    }
  },
  mounted () {
    // 初始化编辑器
    this.$refs.editor.quill.setContents(this.content)
  }
}
</script>

3. 在 `mounted` 钩子函数中，使用 `this.$refs.editor.quill.setContents()` 方法将数据传递给编辑器组件，完成内容的回显。

需要注意的是，不同的富文本编辑器组件可能有不同的 API 和用法，具体实现方式可能会有所区别。