Vue使用Markdown编辑器mavonEditor

具体步骤如下

1. Install mavon-editor (安装)

npm install mavon-editor --save

2. Use (如何引入)

• 全局注册

main.js

// 全局注册
   import Vue from 'vue'
   import mavonEditor from 'mavon-editor'
   import 'mavon-editor/dist/css/index.css'
   // use
   Vue.use(mavonEditor)
   new Vue({
       'el': '#main',
       data() {
           return { value: '' }
       }
   })

index.html

<div id="main">
    <mavon-editor v-model="value"/>
</div>

• 组件内注册

<template>
  <div class="markdown-editor">
    <mavonEditor v-model="content" style="min-height: 500px"/>
  </div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
name: 'MarkdownEditor',
  data () {
    return {
      content: ''
    }
  },
  components: { mavonEditor },
}
</script>

3. 图片上传

<template>
  <div class="markdown-editor">
    <mavonEditor v-model="content" ref="markdownEle" @imgAdd="imageAdd" @imgDel="imageDel"/>
  </div>
</template>
<script>
import { axios } from 'axios'
export default {
methods: {
    // 绑定@imgAdd event
    imageAdd (pos, file) {
      // 将图片上传到服务器
      let formData = new FormData()
      formData.append('image', file)
      this.imageFile[pos] = file
      axios({
        url: 'server url',
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(res => {
        let data = res.data
        this.$refs.markdownEle.$img2Url(pos, data.url)
      })
    },
    // 绑定@imgDel event
    imageDel (pos) {
      delete this.imageFile[pos]
    }
  }
}
</script>

````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

参考文章：Markdown编辑器mavonEditor的GitHub地址