vue使用富文本编辑器vue-quill-editor

<template>
  <div class="quill-editor">
    <!-- 容器元素，Quill 编辑器将挂载在这里 -->
    <div ref="myQuillEditor" class="editor"></div>
  </div>
</template>
 
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
 
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      // 编辑器的内容
      content: '',
      // 编辑器选项
      editorOption: {
        // some Quill options...
      },
    }
  },
  methods: {
    // 将编辑器的内容传递给父组件
    emitContent() {
      this.$emit('update:content', this.content)
    }
  },
  mounted() {
    // 初始化编辑器
    const quill = this.$refs.myQuillEditor.quill
    // 设置内容
    if (this.content) {
      quill.setContents(this.content)
    }
    // 监听编辑器内容变化
    quill.on('text-change', (delta, oldDelta, source) => {
      const html = this.$refs.myQuillEditor.quill.root.innerHTML
      // 将HTML内容传递给父组件
      this.content = html
      this.emitContent()
    })
  }
}
</script>
 
<style>
.quill-editor {
  /* 编辑器样式 */
}
</style>

这个代码实例展示了如何在Vue组件中使用vue-quill-editor。它包括了编辑器的初始化、内容设置和监听变化。通过自定义事件update:content，它将编辑器的内容传递回父组件。