将 quill 模块与 vue2-editor 和 webpack 混合使用答案

【问题标题】：Using quill modules with vue2-editor and webpack mix将 quill 模块与 vue2-editor 和 webpack 混合使用
【发布时间】：2020-01-11 20:53:04
【问题描述】：

我目前正在使用 vue2-editor 并导入 quill 模块并根据文档注册它们。但是得到错误 window.Quill 是未定义的。

我尝试了 webpack 插件组合以包含 window.Quill 和 Quill，但错误仍然相同。

在我的 vue 组件中

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

在我的 webpack 组合中

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

未捕获的类型错误：无法读取未定义的属性“导入”

来自 window.Quill.imports

【问题讨论】：

标签： vue.js laravel-5 webpack quill

【解决方案1】：

对我来说，改变后得到了修复

import { ImageResize } from "quill-image-resize-module";

到

import ImageResize from "quill-image-resize-module";

【讨论】：

【解决方案2】：

您需要从https://www.jsdelivr.com/package/npm/quill-image-resize-vue 获取真正有效的文件：

只需安装 npm i --save quill-image-resize-vue 并使用另一个文件：

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: {},
              }
            }
        }
     },
     //........
}

【讨论】：