vue3集成vue-quill 并使用Quill Modules

Vue3中集成Vue-Quill库并使用其模块功能可以让你在项目中轻松地添加富文本编辑器功能。以下是步骤：

1. **安装依赖**：
首先，在你的Vue3项目中安装`@vue-quill-editor/core`和`@vue-quill-editor/module-image`（或其他你需要的模块），例如图片模块。你可以通过npm或yarn进行安装：

   npm install @vue-quill-editor/core @vue-quill-editor/module-image
   # 或者
   yarn add @vue-quill-editor/core @vue-quill-editor/module-image

2. **引入组件**：
在你的`.vue`文件中，引入`VueQuillEditor`组件，并配置你需要的模块。例如，只导入图片模块：

   <template>
     <div>
       <vue-quill-editor :modules="quillModules" v-model="content"></vue-quill-editor>
     </div>
   </template>

   <script>
   import { VueQuillEditor } from '@vue-quill-editor/core'
   import ImageModule from '@vue-quill-editor/module-image'

   export default {
     components: {
       VueQuillEditor,
     },
     data() {
       return {
         content: '',
         quillModules: {
           image: true,
         },
       }
     },
   }
   </script>

3. **设置模块配置**：
模块选项可以根据需要自定义，比如设置上传图片的URL、禁用图片等。如果需要更复杂的配置，可以在data里创建一个完整的模块对象。

4. **事件监听和处理**：
`VueQuillEditor`提供了各种模块相关的事件，如`image uploaded`等，你可以通过`v-on`绑定到组件上，监听并处理这些事件。

<template>
...
</template>

<script>
...
export default {
  methods: {
    handleImageUpload(file) {
      // 处理图片上传逻辑
    },
  },
  mounted() {
    this.$refs.quillEditor.on('image-added', (event) => {
      this.handleImageUpload(event.clipboardData.items[0].getAsFile())
    })
  },
}
...
</script>