Use Markdown Editor (mavon-editor) en vue

# npm install

npm install mavon-editor --save

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

# Uso en componentes

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

• El componente primario obtiene propiedades y métodos del componente secundario: https://blog.csdn.net/zhongshijun521/article/details/80610971
  
  
  
  

# Mostrar texto enriquecido, agregar class = "markdown-body" donde sea necesario

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

# Introducido en el directorio raíz 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">

Documentación oficial: https://github.com/hinesboy/mavonEditor/blob/master/README.md

Reimpreso de: https://www.jianshu.com/p/474197c1f7cc
Referencia: https://www.jianshu.com/p/04376d0c9ff1