vue 中使用 markdown 编辑器（mavon-editor）

# 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>

• 父组件获取子组件属性和方法：https://blog.csdn.net/zhongshijun521/article/details/80610971
  
  
  
  

# 显示富文本的文本，在需要展示的地方加上 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