Using quill modules with vue2-editor and webpack mix

Question

I'm currently using vue2-editor and importing quill modules and registering them as per documentation.But getting error window.Quill is undefined.

I've tried webpack plugin mix to include window.Quill and Quill but still error remains the same.

In my vue component

import { VueEditor } from "vue2-editor";
import { Quill } from "quill";
import { ImageDrop } from "quill-image-drop-module";
import { ImageResize } from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);

And in my webpack mix

mix.extend('foo',new class{
    webpackPlugins(){
        return new webpack.ProvidePlugin({
            "window.Quill": "quill/dist/quill.js",
            Quill: "quill/dist/quill.js"
    });
    }
});  

Uncaught TypeError: Cannot read property 'imports' of undefined

which is from window.Quill.imports

Answer 1

You need to get REALY working files from https://www.jsdelivr.com/package/npm/quill-image-resize-vue:

Just install npm i --save quill-image-resize-vue and use another file:

import { VueEditor,Quill } from 'vue2-editor'

import ImageResize from 'quill-image-resize-vue';
import { ImageDrop } from 'quill-image-drop-module';

Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);

export default {
    name: 'MainForm',
    components: { VueEditor},
    data() {
        return {
            content: '<h2>I am Example</h2>',
            editorSettings: {
              modules: {
                imageDrop: true,
                imageResize: {},
              }
            }
        }
     },
     //........
}