vue3项目引入VueQuill富文本编辑器（成功）及 quill-image-uploader 图像模块（未成功）

// 在 Vue 3 项目中引入 VueQuill 富文本编辑器并配置图像上传器
import { createApp } from 'vue';
import App from './App.vue';
import VueQuill from 'vue-quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

// 配置图像上传器
import { quillEditor, Quill } from 'vue-quill';
import { uploadImage } from './utils/uploadImage'; // 假设有一个上传图片的函数

// 引入图像上传的模块
import 'quill-image-drop-module';
import 'quill-image-resize-module';

// 注册图像上传处理程序
const imageHandler = () => {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.click();

  input.onchange = async () => {
    const file = input.files[0];
    if (file) {
      const formData = new FormData();
      formData.append('image', file);
      try {
        const response = await uploadImage(formData);
        // 假设上传成功返回的response有一个data.url属性
        Quill.findQuill(this.quill).insertEmbed(range.index, 'image', response.data.url);
      } catch (error) {
        console.error('图片上传失败', error);
      }
    }
  };
};

// 配置图像上传模块
Quill.register('modules/imageResize', imageResizeModule);
Quill.register('modules/imageDrop', imageDropModule);

const app = createApp(App);

app.use(VueQuill, {
  // 注册图像上传的按钮和相关配置
  quillEditor: {
    modules: {
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['image', 'video'],
          ['imageResize']
        ],
        handlers: {
          'image': imageHandler
        }
      },
      imageResize: {},
      imageDrop: {}
    }
  }
});

app.mount('#app');