在Vue中使用mavonEditor

安装

npm install mavon-editor --save

引入

//在 main.js 全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor);

基础使用

<mavon-editor
	v-model="value"
	:ishljs="true"
	@imgAdd="$imgAdd"
	@imgDel="$imgDel"
	@save="saveDoc">
</mavon-editor>

methods:

saveDoc(value, render) {
	console.log(value); //value:md格式
	console.log(render);//render:html格式
}

显示：

<article v-html="html" style="height: 270px"></article>

如果只想存储md格式的值，可以使用编辑器自带的markdown-it进行解析。
首先还是在main.js注册

Vue.prototype.$markDown = mavonEditor.markdownIt;

使用：

this.html = this.$markDown.render(你保存的md格式数据)

markdown-it 中文文档
mavonEditor这样介绍Markdown-It的

图片上传

import axios from 'axios';

$imgAdd(pos, $file){
  let formData = new FormData();
  formData.append('image', $file);
  let self = this;
  axios({
    url: 'you url', 
    method: 'post',
    data: formData,
    headers: { 'Content-Type': 'multipart/form-data' },
  }).then(function (response) { 
    if (200 != response.data.code)
    {
      self.$Message.error({
              content: '上传图片失败！格式不正确或图片超过2M ',
              duration: 5,
              closable: true,
              background:true
            });
    }else{
      self.$refs.md.$img2Url(pos, response.data.imagePath); //后端处理返回一个imagePath
    }
  })
},
$imgDel (pos) {
  //delete pos;
  console.log(pos)
},

同时上传多个图片，参考官方
上传后返回imagePath将替换文本原位置，如图

github上mavonEditor文档