vue项目中使用富文本编辑器vue2-editor

注意，这篇是对于vue2项目的

首先要使用第三方插件，就要下载

npm install --save vue2-editor

然后在需要的页面使用：

import { VueEditor } from "vue2-editor";

然后注册组件：在v-model中绑定表单数据

 富文本编辑器最主要的一个功能就是上传图片

其实也很简单，在vue-editor里面加一个属性，一个事件

然后再metheds里面定义自定义上传方法：

async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
// 一般情况下，我们都是提交json数据，但是现在要上传文件所以要使用FormData方式上传表单
    var formData = new FormData();
    formData.append("file", file);
    // 发请求
    let res = await upload(this.formData)
    // 把图片放在光标所在的位置
    Editor.insertEmbed(cursorLocation, "image", res.data.url);
    resetUploader();
}

 ok，这就完成了图片上传