vue-quill-editor扩展支持上传图片并拖拽以及放大缩小

图片拖拽以及放大缩小

基本功能的基础上支持图片的拖拽放大和缩小更便于富文本中对图片进行操作。需要配合插件进行使用。

1. npm 安装插件

npm i quill-image-drop-module  -S // 拖拽插件
npm i quill-image-resize-module -S // 放大缩小插件

2. 组件引用

 import { ImageDrop } from 'quill-image-drop-module'
 import ImageResize from 'quill-image-resize-module'
 Quill.register('modules/imageDrop', ImageDrop);
 Quill.register('modules/imageResize', ImageResize);

3. 工具栏配置

 editorOption: {
        modules:{
          imageDrop: true,      //图片拖拽
           imageResize: { // 放大缩小
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }
          toolbar: {
            container: toolbarOptions,  // 工具栏
            
            }
          },

        },
        theme:'snow'
      },

报错：

处理：
在build文件夹下的webpack.base.conf.js新增如下代码

module.exports = {
	plugins: [
	        new webpack.ProvidePlugin({
        		// 在这儿添加下面两行
	            'window.Quill': 'quill/dist/quill.js',
	            'Quill': 'quill/dist/quill.js'
        })
	]
}

当前已经可以支持从文件夹以及桌面拖拽图片添加到富文本中以及在富文本中对图片大小进行放大和缩小了。