vue-quill-editor使用quill-image-re

2019-08-28  本文已影响0人  柠檬家的芒果果

首先看下报错

Cannot read property 'imports' of undefined"、
Failed to mount component: template or render function not defined.、
Cannot read property 'register' of undefined

正确引入过程

1.安装依赖

cnpm install quill-image-resize-module

2.在项目build文件夹中找到webpack.base.conf.js

如果找不到webpack.base.conf.js文件,可以看看webpack开头的文件中有哪个模块写的是

module.exports = {
 entry:{},
 output:{},
 resolve:{},
 module:{}
}

因为要在module中加入以下内容,所以要找到这个webpack文件

3.在webpack文件module模块中加入下面代码

module.exports = {
 entry:{},
 output:{},
 resolve:{},
 module:{
  rules:[
      {
        test: /\.js$/,
        exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
        loader: 'babel-loader'
      }
]}
plugins: [
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
  ]
}

4.在项目中引入

import Quill from 'quill'
import imageResize from 'quill-image-drop-module'
Quill.register('modules/imageResize', imageResize)

5.然后再富文本配置项中配置可缩放组件

options:{
  modules:{
        toolbar:[], // 配置富文本显示哪些按钮的
        imageResize:{} // 配置图片可缩放大小
}
}

这样项目就不会报错啦

上一篇下一篇

猜你喜欢

热点阅读