Vue项目集成mavon-editor的Markdown插件，并回显到网页上
mavon-editor简介
mavon-editor是一款基于Vue的markdown编辑器。
详细使用请参看mavon-editor在码云仓库的介绍：https://gitee.com/zvlance/mavonEditor
mavon-editor的使用
组件引入
安装
npm install mavon-editor --save
全局引入
一般使用全局引入，如果想使用其他方式引入，推荐上文的码云仓库介绍
main.js
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
//vue的使用略......
使用
使用的方式非常简单
<div id="main">
<mavon-editor v-model="value"/>
</div>
v-model绑定的就是mavon-editor编辑器中写的md内容。
具体的API参看上文提到的码云仓库
mavon-editor中的图片上传
除了图片上传需要配置图片上传的服务器地址外，其余mavon-editor编辑器中的操作基本不需要配置。
方式1：每次添加图片直接触发上传
<template>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
methods: {
// 绑定@imgAdd event
$imgAdd(pos, $file){
// 第一步.将图片上传到服务器.
var formdata = new FormData();
//这里的'image'即对应的是后台需要接受的参数名，如果有有配置，则需要和后台的参数名对应
formdata.append('image', $file);
axios({
url: 'server url', //图片上传接口路径
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((url) => {
// 第二步.将返回的url替换到文本原位置 -> 
// 图片回显到编辑器添加图片的位置
$vm.$img2Url(pos, url);
//或者使用以下方式回显
//this.$refs.md.$img2Url(pos, url);
})
},
$imgDel(pos) {
//删除图片的业务，可根据具体需求实现
},
}
}
方式1：保存时统一上传多张图片
<template>
<!--点击按钮触发图片统一上传-->
<button @click="uploadimg">upload</button>
<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
data(){
return {
img_file: {}
}
},
methods: {
// 绑定@imgAdd event
$imgAdd(pos, $file){
// 缓存图片信息
this.img_file[pos] = $file;
},
$imgDel(pos){
//删除缓存的指定的图片
delete this.img_file[pos];
},
uploadimg($e){
// 第一步.将图片上传到服务器.
var formdata = new FormData();
for(let _img in this.img_file){
formdata.append(_img, this.img_file[_img]);
}
axios({
url: 'server url', //图片上传接口路径
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' },
}).then((res) => {
/**
* 例如：返回数据为 res = [[pos, url], [pos, url]...]
* pos 为原图片标志（0）
* url 为上传后图片的url地址
*/
// 第二步.将返回的url替换到文本原位置 -> 
for (var img in res) {
// $vm.$img2Url 详情见本页末尾
$vm.$img2Url(img[0], img[1]);
}
})
},
}
}
修改mavon-editor的默认样式
mavon-edito编辑器默认大小样式为 min-height: 300px , min-width: 300px。可通过覆盖直接设置样式，否则默认编辑器的大小不能铺满屏幕。
保存mavon-editor编辑器到数据库
v-model绑定的是mavon-editor编辑器中写的md格式的内容。
但是为了方便到时候将md格式的数据回显到网页上，我们需要将html的数据一并上传到数据库。
this.$refs.md.d_render的值为mavon-editor编辑器生成的html格式的数据（暂定为contentMarkDown），可直接保存在数据库。
this.$refs.md.d_value的值为mavon-editor编辑器生成的md格式的数据暂定为contentHtml），相当于v-model绑定的值。
使用mavon-editor修改上传到数据库中的数据
- 通过后台接口查询数据库存储的
contentMarkDown的数据，令其等于mavon-editor绑定的v-model的值，即可实现md格式的数据回显到mavon-editor的编辑器当中。
ps：具体的查询数据库数据和数据绑定，略… - 重新编辑md格式的数据，上传到数据库，但是一定要注意，需要重新生成HTML格式的数据，同步更新
contentHtml，否则回显的数据不能得到及时更新。
回显mavon-editor的数据
1.在vue-cli项目中回显
可以直接利用mavon-editor的v-html属性回显，其中contentHtml即为当时保存在数据库中mavon-editor生成的html数据。
<div class="mavonEditor">
<mavon-editor v-html="contentHtml"/>
</div>
向后台发送请求，查询contentHtml，与v-html进行绑定，即可实现回显。
2.在普通的H5网页中回显
还是先查询数据库中contentHtml的数据，然后利用jquery的html()方法或者js的innerHTML属性直接回显html数据。
<div id="blog-content" class="markdown-body"></div>
<script>
$("#blog-content").html(blogDetail.blogInfos.blog.contentHtml);
</script>
问题
1.回显的html显示问题，没有样式
如果是在vue-cli项目中
在你需要展示html的模块引入import "mavon-editor/dist/css/index.css"
如果是在H5项目
使用cdn引入样式
cdn样式地址：https://cdnjs.com/libraries/github-markdown-css
<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.css" rel="stylesheet">
2.mavonEditor 有序无序列表不能显示数字和小原点的问题
问题原因：ul、li、ol等标签的样式被覆盖了
解决：在这个div中重新设置样式
/*解决mavonEditor 有序无序列表不显示 common.css样式冲突*/
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li {
list-style: inherit;
}
3.mavonEditor回显图片时，图片大小超出父级div，图片溢出
给回显数据的div的所有img设置max-width,如果超出max-width则图片会进行等比例缩放（一般设置比父级div小一些即可）
我的父级div的id是blog-content
#blog-content img {
max-width: 800px;
}