之前做博客开发的时候,需要markdown的支持,找了很多资料,但是都是七拼八凑的,要么是告诉你怎么编写markdown,要么是告诉你怎么展示,我把它们总结一下。
1、介绍mavonEditor
官网:https://md.zhystar.com/
github:https://github.com/hinesboy/mavonEditor
mavonEditor是基于Vue的markdown 编辑器插件,支持自定义界面,代码高亮,图片上传,这些在github中都有写到,相关资料可以去github查看
2、安装mavonEditor
$ npm install mavon-editor –save 或者
$ yarn add mavon-editor
1
2
在main.js中
import mavonEditor from ‘mavon-editor’
import ‘mavon-editor/dist/css/index.css’
Vue.use(mavonEditor)
1
2
3
3、使用mavonEditor编辑markdown
在.vue文件中
<template>
<div>
<mavon-editor v-model=”value”/>
</div>
</template>
<script>
export default {
data() {
return {
value: ”,
defaultData: “preview”
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
打开页面显示可编辑的页面
这里写图片描述
4、使用v-html展示markdown
<article v-html=”value” ></article>
<script>
export default {
data() {
return {//value的值是经过markdown解析后的文本,可使用@change="changeData"
在控制台打印显示
value: <blockquote>
<p>你好</p>
</blockquote>
<p><code>java</code></p>
,
defaultData: “preview”
};
},
methods: {
}
};
</script>