美文网首页
vue-quill-editor使用quill-image-re

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

作者: 柠檬家的芒果果 | 来源:发表于2019-08-28 16:44 被阅读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:{} // 配置图片可缩放大小
    }
    }
    

    这样项目就不会报错啦

    相关文章

      网友评论

          本文标题:vue-quill-editor使用quill-image-re

          本文链接:https://www.haomeiwen.com/subject/yqkmectx.html