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

Posted 2023-02-22

【中文标题】将 quill 模块与 vue2-editor 和 webpack 混合使用

【英文标题】：Using quill modules with vue2-editor and webpack mix

【发布时间】：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

【参考方案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: ,
              
            
        
     ,
     //........