改造vue-quill-editor：实现图片上传到服务器再插入富文本

初始编辑器：

修改后的编辑器：

去除一些多余的功能，实现图片上传到服务器主要是以下代码：

      /*选择上传图片切换*/
      onFileChange(e) {
        var fileInput = e.target;
        if (fileInput.files.length === 0) {
          return
        }
        this.editor.focus();
        if (fileInput.files[0].size > this.maxUploadSize) {
          this.$alert('图片不能大于500KB', '图片尺寸过大', {
            confirmButtonText: '确定',
            type: 'warning',
          })
        }
        var data = new FormData;
        data.append(this.fileName, fileInput.files[0]);
        this.$http.post(this.uploadUrl, data)
          .then(res => {
            if (res.data) {
              console.log(res.data);
              this.editor.insertEmbed(this.editor.getSelection().index, 'image', res.data)
            }
          })
      },
      /*点击上传图片按钮*/
      imgClick() {
        if (!this.uploadUrl) {
          console.log('no editor uploadUrl');
          return;
        }
        /*内存创建input file*/
        var input = document.createElement('input');
        input.type = 'file';
        input.name = this.fileName;
        input.accept = 'image/jpeg,image/png,image/jpg,image/gif';
        input.onchange = this.onFileChange;
        input.click()
      }

点击上传图片按钮后，先调用imgClick方法，当内容改变时调用onFileChange方法，将图片上传到服务器。服务器路径存放在this.uploadUrl中，通过调用组件时传入。组件调用：

属性说明：

属性名	说明	数据类型	默认值
value	编辑器的输出结果，可以用v-model双向绑定	String	无
upload-url	上传按钮对应的图片上传地址，以项目全局的url配置为前缀	String	无
file-name	上传文件的参数名	String	file
maxUploadSize	上传文件的大小限制，单位byte	Number	500kb

备注：

默认支持的图片类型：jpg/png/jpeg/gif

测试结果：

后台数据库：