vue-quill-editor 组件使用文档

Vue-quill-editor 是一个基于 Quill.js 的富文本编辑器组件，它提供了一些方便的 API，使得在 Vue.js 应用中使用 Quill.js 编辑器更加容易。下面是使用文档：

1. 安装

npm install vue-quill-editor --save

2. 引入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

3. 使用

<template>
  <div>
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorOption: {
        // Quill 选项
      }
    }
  }
}
</script>

4. 组件选项

Vue-quill-editor 组件支持传递一个对象作为选项，这些选项将传递给 Quill 实例。这些选项可以在组件的 `options` 属性中设置。下面是一些常用的选项：

- `placeholder`：编辑器的占位符文本
- `modules`：Quill 模块
- `theme`：Quill 主题
- `readOnly`：是否只读
- `formats`：Quill 支持的格式

更多选项可以参考 Quill 的文档。

5. 事件

Vue-quill-editor 组件支持一些事件：

- `@blur`：失去焦点时触发
- `@focus`：获得焦点时触发
- `@ready`：编辑器初始化完成后触发
- `@change`：内容发生改变时触发
- `@selection-change`：选区发生改变时触发

6. 提交表单

由于 Vue-quill-editor 组件是一个自定义组件，需要在提交表单时手动获取编辑器内容并将其设置为表单数据。可以在表单提交前调用一个方法来实现这个功能，例如：

<template>
  <form @submit.prevent="submitForm">
    <quill-editor v-model="content" :options="editorOption"></quill-editor>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorOption: {
        // Quill 选项
      }
    }
  },
  methods: {
    submitForm() {
      // 获取编辑器内容
      const content = this.$refs.quillEditor.quill.root.innerHTML
      // 设置表单数据
      this.form.content = content
      // 提交表单
      this.$http.post('/api/form', this.form)
    }
  }
}
</script>

以上就是使用 Vue-quill-editor 组件的基本方法，希望对你有所帮助！