vueup / vue-quill

Rich Text Editor Component for Vue 3.
https://vueup.github.io/vue-quill/
MIT License
1.08k stars 261 forks source link

Import quill.imageUploader.min.js Uncaught ReferenceError: Quill is not defined #569

Open roinheart opened 1 month ago

roinheart commented 1 month ago

@vueup/vue-quill version 1.2.0

I integrated quill and quill imageuploader with require js, but when loading quill imageuploader, I received a prompt: Unsught RefereError: Quill is not defined.

This is my requirejs config:

require.config({
     paths:{
        'vue': '../libs/node_modules/vue/dist/vue.global.prod',
        'element-plus': '../libs/node_modules/element-plus/dist/index.full.min',
        'quill': '../libs/node_modules/@vueup/vue-quill/dist/vue-quill.global.prod',
        'imageuploder': '../libs/node_modules/quill-image-uploader/dist/quill.imageUploader.min',
        'axios': '../libs/node_modules/axios/dist/axios.min'
     },
     shim: {
        'vue': {
            exports: 'Vue'
        },
        'element-plus': ['css!../libs/node_modules/element-plus/dist/index.css', 'vue'],
        'quill': {
            exports: 'Quill',
            deps: [
                'css!../libs/node_modules/@vueup/vue-quill/dist/vue-quill.core.prod.css',
                'css!../libs/node_modules/@vueup/vue-quill/dist/vue-quill.snow.prod.css',
            ],
        },
        'imageuploader': {
            deps: [
                'quill',
                'css!../libs/node_modules/quill-image-uploader/dist/quill.imageUploader.min.css'
            ]
        },
    }
});

I encountered the same error when loading the Imageuploader after using define to load quill on the web page. This is the code from define:

define([
    'vue',
    'element-plus',
    'quill',
    'imageuploder',
    'axios'
], function (Vue, ElementPlus, Quill, ImageUploader, axios) {
    const { createApp, ref, onMounted } = Vue;
    let Controller = {
        index: function () {
            const app = createApp({
                setup() {
                    const order = ([]);

                    return {
                          order
                    }
                }
            });
            app.component('QuillEditor', Quill.QuillEditor);
            app.use(ElementPlus);
            app.mount("#app");
        },
        api: {
            bindevent: function () { }
        }
    }
    return Controller;
})

Who knows what's going on?