【06】Vue_集成mavon-editor编辑器

【06】Vue_集成mavon-editor编辑器

官网：https://www.npmjs.com/package/mavon-editor

一、mavon-editor 安装

$ npm install mavon-editor --save

二、项目中引入（以vue-cli 项目为例

    // 全局注册
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { content: '' }
        }
    })

三、页面中使用

<div id="main">
    
<mavon-editor v-model="content"
              ref="md"
              @imgAdd="imgAdd"
              @imgDel="imgDel">
mavon-editor>
    
div>

四、图片上传和删除

上面绑定了2个事件，imgAdd 和 imgDel

methods: {
    imgAdd(pos, $file) {
      // 图片上传到服务器.
      let _this = this;
      let formData = new FormData();
      formData.append('image', $file);
      this.$axios({
        url: "/pub/upload",
        method: "post",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(resp => {
        if (resp.code == 200) {
          // 将返回的 url替换到文本原位置![...](0) -> ![...](url)
          _this.$refs.md.$imglst2Url([[pos, resp.data]])
        } else {
          _this.$message({type: resp.code, message: resp.msg});
        }
      });
    },
    imgDel(pos) {

    }
  }

** $vm 指为mavonEditor实例，可以通过如下两种方式获取
	* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
	* 2. 通过$refs获取: html声明 ref : `，`$vm`为 `this.$refs.md`
s获取: html声明 ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`