vue-quill-editor集成封装上传图片

### 封装 `vue-quill-editor` 的图片上传功能

为了在 `vue-quill-editor` 中集成并封装上传图片的功能，可以按照如下方法操作：

#### 1. 安装依赖库
安装必要的 npm 包来支持文件上传和其他扩展模块。

npm install quill vue-quill-editor quill-image-drop-module quill-image-resize-module -S

这一步骤确保了项目中有处理图像拖放和调整大小的能力[^2]。

#### 2. 创建自定义编辑器组件
创建一个新的 Vue 组件用于包裹原始的 `quill-editor` 并添加额外逻辑。在这个过程中，可以通过监听事件或修改配置项来自定义行为。

// QuillEditorWithUpload.vue
<template>
  <div>
    <quill-editor ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
      <!-- 插槽内容 -->
    </quill-editor>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import ImageDrop from 'quill-image-drop-module' // 支持拖拽图片
import ImageResize from 'quill-image-resize-module' // 支持图片缩放

export default {
  name: 'QuillEditorWithUpload',
  components: {
    quillEditor,
  },
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic'],
            [{ list: 'ordered'}, { list: 'bullet'}],
            ['link', 'image']
          ],
          imageDrop: true,           // 启用拖拽图片
          imageResize: {},           // 配置图片尺寸调整选项
        }
      }
    };
  },
  methods: {
    onEditorBlur(editor) {},
    onEditorFocus(editor) {},
    onEditorReady(editor) {
      const _this = this;
      editor.root.addEventListener('paste', function (e) {
        var clipboardData = e.clipboardData || window.clipboardData;
        if(clipboardData.items && _.some(clipboardData.items, function(item){
          return item.kind === "file" && item.type.indexOf("image") !== -1;
        })) {
          e.preventDefault();
          Array.from(clipboardData.files).forEach(file => {
            if (/^image\//.test(file.type)) {
              let formData = new FormData();
              formData.append('file', file);
              
              fetch('/api/uploadImage', {
                method: 'POST',
                body: formData
              }).then(response => response.json())
                     .then(result => {
                       let range = _this.$refs.myQuillEditor.quill.getSelection();
                       _this.$refs.myQuillEditor.quill.insertEmbed(range.index, 'image', result.url);
                     });
            }
          })
        }
      });
    }
  },
};
</script>

这段代码展示了如何通过监听粘贴事件捕获剪切板中的图片数据，并将其作为二进制形式发送到服务器端进行保存；之后再把返回的结果 URL 插入到文档中显示出来[^3]。

#### 3. 使用自定义组件
最后，在表单或其他地方引入刚刚创建好的带有图片上传能力的新版编辑器组件即可正常使用。

<!-- ExampleForm.vue -->
<template>
  <el-form-item label="内容">
    <quill-editor-with-upload></quill-editor-with-upload>
  </el-form-item>
</template>

<script>
import QuillEditorWithUpload from './path/to/QuillEditorWithUpload';

export default {
  components: {
    QuillEditorWithUpload,
  },
}
</script>

这样就完成了对 `vue-quill-editor` 进行增强以支持更友好的图片上传体验的工作[^4]。