mavoneditor使用教程

mavon-editor是一款基于vue的markdown编辑器&＃xff0c;比较适合博客系统。由于官网对于一些细节的说明不够详细&＃xff0c;这里对这里对该编辑器的使用做一个总结。

1. 安装
2. 基本使用
3. 图片上传(含服务端)
   安装
   npm install mavon-editor --save

基本使用
在vue-cli构建的脚手架离得main.js可以像这样引用&＃xff1a;

// 全局注册import Vue from &＃39;vue&＃39;import mavonEditor from &＃39;mavon-editor&＃39;import &＃39;mavon-editor/dist/css/index.css&＃39;// useVue.use(mavonEditor)new Vue({&＃39;el&＃39;: &＃39;#main&＃39;})


在具体的组件里html里定义挂载点

效果
图片上传&＃xff1a;
先将挂在点里的方法写好&＃xff0c;就像这样

主要是将ref&＃61;md &＃64;imgAdd&＃61;"$imgAdd" &＃64;imgDel&＃61;"$imgDel"放进去&＃xff0c;其他是我的其他代码。
然后定义$imgAdd和$imgDel方法:


// 绑定&＃64;imgAdd event
$imgAdd(pos, $file) {// 第一步.将图片上传到服务器.var formdata &＃61; new FormData();formdata.append(&＃39;image&＃39;, $file);this.img_file[pos] &＃61; $file;this.$http({url: &＃39;/api/edit/uploadimg&＃39;,method: &＃39;post&＃39;,data: formdata,headers: { &＃39;Content-Type&＃39;: &＃39;multipart/form-data&＃39; },}).then((res) &＃61;> {let _res &＃61; res.data;// 第二步.将返回的url替换到文本原位置[外链图片转存失败(img-v2eG7egk-1562220599730)(0)] -> [外链图片转存失败(img-RmlJ1kIp-1562220599733)(url)]this.$refs.md.$img2Url(pos, _res.url);})
},
$imgDel(pos) {delete this.img_file[pos];
}


这里注意我的this.$https就是我的axios对象&＃xff08;用过vue-cli的都懂的&＃xff09;&＃xff0c;然后this.img_file是我之前定义的一个空对象。
this.$refs.md和挂在点定义的要保持一致。


剩下的就是交给服务端去处理了&＃xff1a;
大家有不明白的地方或者需要我补充更正的地方欢迎留言~