# npm 安装
npm install mavon-editor --save
# 新建 mavonEditro.vue
<template>
<div>
<mavon-editor
v-model="content"
@change="change"
style="min-height: 600px"
/>
</div>
</template>
<script>
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
name: "mavonEditro",
components: {
mavonEditor,
},
data() {
return {
content:'', // 输入的markdown
html:'', // 及时转的html
}
},
methods: {
// 所有操作都会被解析重新渲染
change(value, render){
// render 为 markdown 解析后的结果[html]
this.html = render;
},
},
mounted() {
}
}
</script>
<style scoped>
</style>
# 组件内使用
<template>
<div>
<mavonEditro ref="myMavonEditro"></mavonEditro>
<button @click="submit">提交</button>
</div>
</template>
<script>
import mavonEditro from '@/components/mavonEditro'
export default {
name: 'HelloWorld',
components: {
mavonEditro
},
data () {
return {
}
},
mounted() {
console.log(" 获取富文本框内的值,使用this.$refs.myMavonEditro.content 获取");
},
methods: {
submit() {
console.log(this.$refs.myMavonEditro.content);
console.log(this.$refs.myMavonEditro.html);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
# 显示富文本的文本,在需要展示的地方加上 class=“markdown-body”
<template>
<div class="markdown-body" v-html="text"></div>
</template>
<script>
export default {
name: "views",
data() {
return {
text: '<p>欢迎使用 markdown 编辑器</p>'
}
}
}
</script>
<style scoped>
</style>
# 在根目录 index.html 中引入
<!-- 引入mavonEditro 样式 -->
<link href="https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
官方文档:https://github.com/hinesboy/mavonEditor/blob/master/README.md
转载自:https://www.jianshu.com/p/474197c1f7cc
参考:https://www.jianshu.com/p/04376d0c9ff1