将 quill 模块与 vue2-editor 和 webpack 混合使用
Using quill modules with vue2-editor and webpack mix
我目前正在使用 vue2-editor 并导入 quill 模块并根据 documentation.But 注册它们得到错误 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"
});
}
});
未捕获的类型错误:无法读取未定义的 属性 'imports'
来自 window.Quill.imports
您需要从 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: {},
}
}
}
},
//........
}
对我来说,修改后就修复了
import { ImageResize } from "quill-image-resize-module";
至
import ImageResize from "quill-image-resize-module";
我目前正在使用 vue2-editor 并导入 quill 模块并根据 documentation.But 注册它们得到错误 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"
});
}
});
未捕获的类型错误:无法读取未定义的 属性 'imports'
来自 window.Quill.imports
您需要从 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: {},
}
}
}
},
//........
}
对我来说,修改后就修复了
import { ImageResize } from "quill-image-resize-module";
至
import ImageResize from "quill-image-resize-module";