quill Cannot import ImageResize. Are you sure it was registered?

在使用vue-quill-editor富文本编辑器时注册他提供的插件报错TypeError: Cannot read property ‘imports’ of undefined ； quill Cannot import ImageResize. Are you sure it was registered?

首先看一下报错的代码

quill Cannot import ImageResize. Are you sure it was registered?
Cannot read property ‘imports’ of undefined

在网上有很多解决方案针对webpack 但是亲测无效可能是版本问题相对而言这个解决方案不很友好因为绝大多数猿对webpack是不够了解的

进入正题首先看报错

报错内容：无法读取未定义的属性’imports’ 或者
可以下载下这个js文件来看他报错的地方一目了然在调用window.Quill.imports方法时window.Quill是未定义的也就是说插件加载的比Quild早了还没有window.Quill.这个对象 .
4.解决方案直接上代码首先吧你要引入的模块的js文件下载下来我的是image-resize.min.js 这个js文件可以去官方文档下在如果已经安装过了的可以再自己的node_modules文件夹中找到
main.js引入时写入以下代码这样就能保证在注册该插件的时候window.Quil是存在的了所有的问题就迎刃而解

  import {Quill} from 'vue-quill-editor' window.Quill = Quillconst scriptEl = document.createElement('script'); scriptEl.charset = 'utf-8' scriptEl.src =  './image-resize.min.js' const head = document.head || document.getElementsByTagName('head')[0]; head.appendChild(scriptEl);

总结

无论你注册组件的方法是

Quill.register(‘modules/imageResize’, ImageResize);
var Module = Quill.import(‘core/module’);

class CustomModule extends Module {}

Quill.register(‘modules/custom-module’, CustomModule);

都可用以上方法引入简单实用

quill Cannot import ImageResize. Are you sure it was registered?相关推荐

quill一些插件的配置注意事项
为了方便,是用了vue-quill-editor作为富文本编辑器,但是他和一些插件的安装有注意点: 1.在vue.config.js中修改配置 var webpack = require('webpa ...
vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
vue中使用quill富文本编辑器
因为公司的需求,对比了线在很火的几款富文本编辑器,最终选定了quill,他够轻量,拓展性也比较高,除了文档是英文的阅读不方便之外,都很适合公司项目.故整理出来,也方便以后使用. 在网上找了一个中文文档 ...
quill 富文本编辑器
富文本quill 富文本框中上传图片的缩放功能 vue.config.js添加如下配置 import "./resizeImg.js"➡ resizeImg.js下载链接 3.以下 ...
Vue-quill-editor改变图片大小ImageResize问题解决
用过Vue-quill-editor的小伙伴都会发现,上传的图片是不能任意变换它的大小的,这需要我们用一个插件,使这个图片可以任意变换大小. 步骤: 1.安装quill-image-resize-mo ...
前端富文本编辑器哪家强？我推荐Quill，搭配丰富插件使用美滋滋
最近在用vue + element-ui对公司的后台管理系统进行重构,听说这个后台管理系统是零几年的产物,历史悠久,看界面就看得出是前后端不分离时期,PHP后端工程师做的,不符合我们95后程序员的审美 ...
Quill Editor
VUE-QUILL-EDITOR 该文章仅记录学习过程,不展示最终文件源码安装 quill-editor 在对应的目录打开 Terminal 执行以下命令: 安装 editor npm instal ...
现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
【华为云技术分享】现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

quill Cannot import ImageResize. Are you sure it was registered?

在使用vue-quill-editor富文本编辑器时注册他提供的插件报错TypeError: Cannot read property ‘imports’ of undefined ； quill Cannot import ImageResize. Are you sure it was registered?

总结

quill Cannot import ImageResize. Are you sure it was registered?相关推荐

最新文章

热门文章