vue使用vue2-editor富文本插件

简介：由于项目需要，需要在前端项目中加入富文本，而项目框架又是使用的使用步骤
1.使用后vue2-editor组件 npm install vue2-editor
2.编写相关代码

<template>
  <div id="app">
    <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="htmlForEditor"> </vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import axios from "axios";
export default {
  components: {
    VueEditor
  },

  data() {
    return {
      htmlForEditor: ""
    };
  },

  methods: {
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData();
      formData.append("image", file);

      this.axios({
        url: "你的上传图片路径",
        method: "POST",
        data: formData
      })
        .then(result => {
         // 你上传路径返回的url
          let url = result.data.url; 
          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

3.至此，富文本已经能达到基本的使用了，但还是有个上传的问题
①：坑1：
@imageAdded=“handleImageAdded” 它会让handleImageAdded不起作用
解决办法：
不要使用驼峰命名法
使用：

 @image-added="handleImageAdded"

②：坑2
由于使用的是nuxt框架，这样的写法会导致报错：document is not defined

删除：import { VueEditor } from “vue2-editor”;和 components: {
VueEditor
}, components的VueEditor

问题解决
官方网址https://www.vue2editor.com