vue整合markdown编辑器mavon-editor

1、安装mavon-editor

npm install mavon-editor --save

2、调用插件

<template>
  <div>
    <mavon-editor></mavon-editor>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  name: "Markdown",
  components: {
    mavonEditor
  }
};
</script>

3、设置图片上传

<mavon-editor :value="msg" @imgAdd="uploadImg"></mavon-editor>
methods: {
  uploadImg(pos, file) {
      var formData = new FormData();
      formData.append('image', file);
      this.$axios({
          url: '文件服务器地址',
          method: "post",
          data: formData,
          headers: {
              'Content-Type': 'multipart/form-data'
          }
      }).then((url) => {
          //使用服务器返回的图片地址替换原图片地址
          $vm.$img2Url(pos, url);
      })
  }
}