vue3 quilleditor 回显

Vue3 QuillEditor是一个富文本编辑器组件，它允许你在Vue应用程序中嵌入Quill编辑器。如果你想要实现在Vue3中回显内容，首先你需要安装`quilljs`和`vue-quill-editor`库。

1. 安装依赖：

npm install quilljs vue-quill-editor

2. 使用组件：
在你的组件文件中引入并配置QuillEditor：

<template>
  <quill-editor v-model="content" :options="editorOptions"></quill-editor>
</template>

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

export default {
  components: {
    QuillEditor,
  },
  data() {
    return {
      content: '', // 初始内容
      editorOptions: {
        modules: {
          toolbar: false, // 隐藏默认工具栏
          // 添加其他自定义模块
        },
        theme: 'snow', // 可选主题，如'snow'、'bubble'
      },
    }
  },
  mounted() {
    if (this.initialContent) { // 如果有初始内容需要回显
      this.content = this.initialContent;
      const editor = new Quill(this.$refs.editorContainer[0], this.editorOptions);
      editor.setContents(this.content); // 设置内容到编辑器
    }
  },
}
</script>

在这里，`initialContent`是你从服务器获取的回显数据。在`mounted()`钩子函数中，如果存在`initialContent`，就将其设置给`v-model`绑定的`content`变量，并通过`setContents()`方法将内容加载到编辑器中。