vue.js - 将 quill 模块与 vue2-editor 和 webpack 混合使用
问题描述
我目前正在使用 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
解决方案
您需要从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: {},
}
}
}
},
//........
}
推荐阅读
- excel - 错误 91 将 For 循环与 XMLHttpRequest VBA 一起使用
- c# - 当鼠标悬停在 WPF Richt-TextBox 中的超链接上时设置光标
- r - 如何转置R中分组数据中的列?
- jsf - 如何完成从 JSF 按钮调用但在托管 bean 中截获的提交?
- angular - 在 Angular 2+ 中使用 MD5 加密 JSON 对象
- javascript - XMLHttpRequest 弹出窗口在 IE11 中不起作用
- r - R:使用条形图在轴标签中组合文本和数学符号
- python-3.x - Python BeautifulSoup
- mysql - Ubuntu /var/lib/mysql/table 上的 MySQL - 它是什么?
- html - 使父 div 适合其子级