vue 显示quilleditor富文本内容

要在 Vue 中显示 Quill Editor 富文本内容，可以使用 `v-html` 指令将内容渲染到页面上。

首先，将 Quill Editor 中的内容存储到 Vue 实例的数据中。例如：

<template>
  <div>
    <div ref="quillEditor"></div>
    <div v-html="content"></div>
  </div>
</template>

<script>
import Quill from 'quill'

export default {
  data() {
    return {
      content: ''
    }
  },
  mounted() {
    const quill = new Quill(this.$refs.quillEditor, {
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          ['link', 'image', 'video'],
          ['clean']
        ]
      },
      placeholder: '请输入内容...'
    })

    // 将 Quill Editor 中的内容存储到 Vue 实例的数据中
    this.content = quill.root.innerHTML
  }
}
</script>

在上面的示例中，我们创建了一个 Quill Editor，并将其渲染到页面上。然后，在 Quill Editor 中输入一些内容后，通过 `quill.root.innerHTML` 获取到输入的内容，并将其存储到 Vue 实例的 `content` 数据中。最后，使用 `v-html` 指令将 `content` 数据渲染到页面上。

需要注意的是，使用 `v-html` 指令会有 XSS（跨站脚本攻击）的风险，因此需要对内容进行安全过滤。可以使用一些第三方库，如 `DOMPurify`，进行过滤。