轻松记录您
灵感和创意

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>

未经允许不得转载:坚果云Markdown编辑器 » Vue编写markdown或者展示markdown
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍