在使用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是不够了解的

进入正题 首先看报错

1. 报错内容：无法读取未定义的属性’imports’ 或者
2. 
3. 可以下载下这个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 = Quill
	
	const 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);

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