若依框架前后分离版本富文本增加图片上传及移动和放大缩小

1，vue.config.js里增加

在上面增加
const webpack = require('webpack')

在下面增加
config.plugin('provide').use(webpack.ProvidePlugin, [{
      // 'window.Quill': 'quill'
      'window.Quill': 'quill'
    }])

 

2，安装引用包

npm install quill-image-drop-module --save
npm i quill-image-resize-module --save 
npm install quill-image-extend-module --save
npm install jquery --save-dev  

 3，在Ediotr/index.vue里增加引用

import $ from 'jquery';

import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop);
import { ImageExtend } from 'quill-image-extend-module'
// quill-image-resize-module该插件是用于控制上传的图片的大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageExtend);
Quill.register('modules/imageResize', ImageResize);

 4，modules下增加代码

imageDrop: true,
//图片拖拽
imageResize:{
  // 图片缩放比例
  displayStyles:{
     backgroundColor:'black',
     border:'none',
     color:'white'
  },
  modules:[
    'Resize',
    'DisplaySize',
    'Toolbar'
  ]
},

 

配置到这可以进行图片的放大及缩小了，后面配置监听黏贴事件

5，修改div  editor代码，增加监听事件及监听方法

handlePaste(evt) {
      let that = this
      if (evt.clipboardData &&
        evt.clipboardData.files &&
        evt.clipboardData.files.length) {
        evt.preventDefault();
        [].forEach.call(evt.clipboardData.files, (file) => {
          if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
            return;
          }
          const formData = new FormData();
          formData.append("file", file);//后台上传接口的参数名
          // 实现上传
          $.ajax({
            type: "post",
            url: process.env.VUE_APP_BASE_API +'/common/upload', // 上传的图片服务器地址
            data: formData,
            headers:{'Authorization': "Bearer " + getToken()},//必须
            dataType: "json",
            processData: false,
            contentType: false,//设置文件上传的type值，必须
            success: (response) => {
              if (response.code == 200 || response.code == 0) {
                //当编辑器中没有输入文本时，这里获取到的 range 为 null
                // 获取富文本组件实例
                let quill = that.Quill;
                var range = quill.selection.savedRange;
                //图片插入在富文本中的位置
                var index = 0;
                if (range == null) {
                  index = 0;
                } else {
                  index = range.index;
                }
                //将图片链接插入到当前的富文本当中
                quill.insertEmbed(index, "image", response.url);
                // 调整光标到最后
                quill.setSelection(index + 1); //光标后移一位
              }
            },
            error: function () {
              this.$message.error('上传失败！')
            },
          });
        });
      }
    },

 

 至此调整完毕。

附完整代码：