vue富文本编辑器中上传图片

啊！！！好久没更新了，最近粉丝和访问量见长，正好有童鞋的项目遇到点问题，故出此文，

今天超哥给小伙伴带来的是vue中富文本编辑器上传的问题。

曾经写过一个文档管理的项目，用到最多的就是富文本编辑器。

说说遇到的坑吧：最终的提交结果，后端不要文档流，后端要上传成功返回的路径，不知道正在阅读此文的小伙伴是如何处理的，瞅着挺简单，但写起来还真有点麻烦，在这里以vue-quill-editor为例给大家演示。

首先安装，不用多说了吧，cnpm install vue-quill-editor -S

接着，引入依赖

import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor)

先说一下实现过程吧，依赖element-ui，当然你可以想成你自己想要的上传插件，或者有大神可以直接new FormData()也是可以的。用白话文讲就是把插件中的图片按钮用el-upload覆盖，就这么简单。具体实现过程请继续往下看。

在所需的vue文件中

首先看DOM层，只需两个标签即可（quill-editor，el-upload）

附代码：

    <el-upload
            class="avatar-uploader"
            :action="serverUrl"
            name="img"
            :data='fileUpload'
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload">
    </el-upload>
    <quill-editor v-model="docContent"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="handleEditorBlur($event)"
          @focus="handleEditorFocus($event)"
          @change="handleEditorChange($event)">
    </quill-editor>

写过vue的相信el-upload大家都不陌生，在这里就不一一介绍各个属性了，而quill-editor这里超哥直接附上传送门vue-quill-editor - npm

数据层，附代码：

fileUpload:{   //附件上传
        file:null
      },
serverUrl: 'http://********',//上传图片的地址
editorOption: {
        placeholder: '',
        theme: 'snow',
        modules: {
          toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                  'image': function (value) {
                  if (value) {
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
          }
        }
      },

看到这里有的小伙伴可能看到了重点，toolbarOptions是哪里来的，不要急，这个东西就是所需配置的工具栏，当时我们项目有回显功能所以超哥单独给他摘出来了。

toolbarOptions.js附代码：

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        
  ['blockquote', 'code-block'],
  [{'header': 1}, {'header': 2}],               
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      
  [{'indent': '-1'}, {'indent': '+1'}],         
  [{'direction': 'rtl'}],                         
  [{'size': ['small', false, 'large', 'huge']}], 
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  [{'color': []}, {'background': []}],          
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                                      
]
export default toolbarOptions

然后继续，逻辑层，附代码：

注：uploadSuccess为改写的重中之重。

    uploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
    },
    uploadSuccess(res, file){
      // 首先获取富文本编辑器的实例
      let quill = this.$refs.myQuillEditor.quill
      // 上传成功所执行
      if (res.code == 200 && res.data !== null) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片res为服务器返回的数据
          quill.insertEmbed(length, 'image', res.data)
          // 光标移动至文本末端
          quill.setSelection(length + 1)
      } else {
          this.$message.error('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
    },
    beforeUpload(file) {
      this.fileUpload.file=file;
        // 显示loading动画
        this.quillUpdateImg = true
    },
    handleEditorBlur () {},
    handleEditorFocus () {},
    //这个是当初做的个文字限制后来没用就注释了
    handleEditorChange (e) {
      /*this.textLen = e.text.length - 1;
      this.beyond = this.textLen - 350;
      if (this.textLen > 350) {
        this.info.evId = '';
      } else {
        this.info.evId = this.evList[0].evId;
      }*/
    },

到这里此工程其实就已经竣工，说简单也简单说复杂也复杂，全在自己的摸索和探讨。

有时候比较忙，顾不上一一回复，但是看到了就一定会回复，

各位小伙伴和童鞋有不明白的或者不会的依然可以留言...

依旧老样子，不喜勿喷，写给需要的人看，渣*请自觉绕道