我是一张图
由于项目是资源管理系统，会使用到富文本编辑器，我们选择了百度UEditor和Markdown两款编辑器。这里先介绍一下Markdown编辑器的整合。
第一步： 安装Markdown插件
npm install mavon-editor --save
第二步：调用插件
我们只需要在我们需要使用Markdown的页面引入插件，如果使用页面比较多的话，建议全局引入。这里我们仅在Markdown页面引入。
<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>
第三步：运行项目，查看效果
npm run serve
Markdown编辑器
第四步：编辑器默认值和图片上传
<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);
})
}
}
上传图片
Markdown编辑器的简单使用暂时就到这里，若你还需要更多的操作，比如实时保存编辑器内容、删除图片后的回调等等，可以参考插件作者给出的文档。
