vue 富文本 quill 预览

对于使用 Vue 和 Quill 富文本编辑器实现预览功能，你可以按照以下步骤进行操作：

1. 首先，安装 Quill 和 Vue 相关的依赖包。在项目根目录下运行以下命令：

npm install vue-quill-editor quill

2. 在需要使用富文本编辑器的组件中，引入并注册 VueQuillEditor 组件：

import { VueQuillEditor } from 'vue-quill-editor';

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

3. 在模板中使用 VueQuillEditor 组件，并绑定一个 v-model 指令来实现双向数据绑定：

<template>
  <div>
    <vue-quill-editor v-model="content"></vue-quill-editor>
    <button @click="preview">预览</button>
    <div v-html="previewContent"></div>
  </div>
</template>

4. 在组件的 data 中定义 content 和 previewContent 变量：

export default {
  data() {
    return {
      content: '',
      previewContent: ''
    };
  },
  // ...
}

5. 在组件的 methods 中定义 preview 方法，用于将编辑器内容渲染为预览内容：

export default {
  // ...
  methods: {
    preview() {
      this.previewContent = this.content;
    }
  }
}

这样，当点击预览按钮时，编辑器中的内容将会渲染到预览区域。

需要注意的是，以上代码仅提供了基本的预览功能，如果需要更复杂的样式或功能，可以进一步定制和扩展。