vue3富文本编辑器vue-quill-editor预览

你可以使用vue-quill-editor的预览功能来实现富文本编辑器的预览效果。首先，确保你已经安装了vue-quill-editor。

npm install vue-quill-editor

然后，在你的Vue组件中引入并注册vue-quill-editor。

import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  components: {
    quillEditor,
  },
  // ...
}

接下来，在模板中使用vue-quill-editor组件来创建富文本编辑器。

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

在data中定义一个变量`content`来存储编辑器的内容，并使用`v-model`指令将其与富文本编辑器绑定。然后，使用一个`div`元素来展示预览效果，使用`v-html`指令将`previewContent`渲染为HTML。

最后，在Vue组件的`computed`属性中定义一个计算属性`previewContent`来将编辑器内容转换为预览内容。

export default {
  // ...
  computed: {
    previewContent() {
      return this.$refs.editor.quill.root.innerHTML;
    },
  },
  // ...
}

这样，当编辑器内容发生变化时，预览内容也会相应更新。

希望这能帮到你！