Vue编写markdown或者展示markdown

之前做博客开发的时候，需要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>