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');

在这个代码实例中，我们首先引入了VueQuill编辑器和必要的CSS。然后，我们创建了一个图像上传的处理函数，并将其注册到Quill的工具栏中。我们还注册了图像大小调整和图像拖拽上传的模块。最后，我们在Vue应用程序中全局使用VueQuill，并配置了自定义的工具栏和模块。这个例子展示了如何在Vue 3项目中集成富文本编辑器并添加自定义的图像上传功能。