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

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

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

npm install --save vue2-editor

然后在需要的页面使用：

import { VueEditor } from "vue2-editor";

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

<template>
  <div id="app">
    <vue-editor v-model="content"></vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  //注册组件
  components: {
    VueEditor
  },

  data() {
    return {
  //双向绑定
      content: "<h1>Some initial content</h1>"
    };
  }
};
</script>

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

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

<vue-editor v-model="content" useCustomImageHandler @image-added="handleImageAdded"></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，这就完成了图片上传