vue富文本组件

<template>
  <div>
    <!-- 富文本编辑器组件 -->
    <quill-editor 
      v-model="content" 
      :options="editorOptions"
      @blur="onEditorBlur($event)" 
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
  </div>
</template>

<script>
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
  },
  data() {
    return {
      content: '<p>富文本内容</p>',
      editorOptions: {
        // 富文本编辑器配置项
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'],                     // 引用 代码块
            [{ 'header': 1 }, { 'header': 2 }],               // 标题，键值对的形式；1、2表示字体大小不同
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }],     // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进
            [{ 'direction': 'rtl' }],                         // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题
            [{ 'color': [] }, { 'background': [] }],          // 字体颜色、背景颜色
            [{ 'font': [] }],                                 // 字体类型
            [{ 'align': [] }],                                // 对齐方式
            ['clean'],                                        // 清除文本格式
            ['link', 'image', 'video']                        // 链接、图片、视频
          ]
        }
      }
    }
  },
  methods: {
    onEditorBlur(editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus(editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady(editor) {
      console.log('editor ready!', editor)
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
.quill-editor {
  height: 300px;
}
</style>

解释说明：

• quill-editor 组件：这是 Vue 中使用的 Quill 富文本编辑器组件。通过 v-model 绑定编辑器的内容，并通过 options 属性传递配置项。
• editorOptions：配置项包括主题（theme）、工具栏（toolbar）等。工具栏中包含了常见的富文本编辑功能，如加粗、斜体、插入链接、图片等。
• 事件处理：提供了 @blur, @focus, 和 @ready 事件来监听编辑器的状态变化。
• 样式：可以通过自定义样式来调整编辑器的高度或其他样式属性。

如果你需要进一步的配置或功能扩展，可以参考 Quill 官方文档 或 vue-quill-editor 文档。