vue引入markdown

1.安装mavon-editor

npm install mavon-editor  --save

2.引入组件

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

3.注册组件

components: {
        mavonEditor,
}

3.使用组件

<template>
    <div>
        <mavon-editor 
            v-model="content" 
            ref="md" 
            @change="change" 
            style="min-height: 600px"
        />
        <button @click="submit">提交</button>
    </div>
</template>

4.书写js

<script>
  import axios from 'axios'
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  export default {
    name: '',
    props: [],
    components: {
      mavonEditor
    },
    data() {
      return {
        content: '',
        html: '',
        configs: {}
      }
    },
    methods: {
      // 将图片上传到服务器，返回地址替换到md中
      $imgAdd(pos, $file) {
        // 第一步.将图片上传到服务器.
        var formdata = new FormData()
        formdata.append('file', $file)
        axios({
          url: 'http://www.xxx/savefile',
          method: 'post',
          data: formdata,
          headers: { 'Content-Type': 'multipart/form-data' }
        }).then((url) => {
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          // $vm.$img2Url 详情见本页末尾
          console.info(url.data.data.files.filepath)
          this.$refs.md.$img2Url(pos, url.data.data.files.filepath)
        }).catch(err => {
          console.log(err)
        })
      },
      // 所有操作都会被解析重新渲染
      change(value, render) {
        // render 为 markdown 解析后的结果[html]
        this.html = render
      },
      // 提交
      submit() {
        console.log(this.content)
        console.log(this.html)
        this.$message.success('提交成功，已打印至控制台！')
      }
    },
    mounted() {

    }
  }
</script>