【Vue】vue2预览显示quill富文本内容，vue-quill-editor回显页面，v-html回显富文本内容

在Vue 2项目中使用vue-quill-editor组件进行富文本编辑，并在页面上使用v-html指令回显富文本内容，可以按照以下步骤操作：

1. 安装vue-quill-editor:

npm install vue-quill-editor --save

2. 在Vue组件中引入并注册vue-quill-editor:

import Vue from 'vue'
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
  },
  // ...
}

3. 使用quillEditor组件进行富文本编辑，并使用数据属性绑定编辑内容：

<template>
  <div>
    <quill-editor v-model="content"></quill-editor>
  </div>
</template>
 
<script>
// ... 上面的组件引入和注册代码
 
export default {
  data() {
    return {
      content: ''
    }
  },
  // ...
}
</script>

4. 使用v-html指令在页面上回显富文本内容：

<template>
  <div v-html="formattedContent"></div>
</template>
 
<script>
// ... 上面的组件引入和注册代码
 
export default {
  computed: {
    formattedContent() {
      // 使用 Quill 的 oembetter 库进行转换
      // 注意：这里需要确保已经安装并导入了 oembetter 库
      return this.content ? Quill.import('delta').oembetter.convert(this.content) : '';
    }
  },
  // ...
}
</script>

确保在实际使用时，对于富文本编辑器的内容，应该使用v-model进行双向绑定，并且在实际的生产环境中，应该对富文本编辑器的内容进行适当的过滤和清理，以防止XSS攻击等安全问题。