markdown编辑器和解析器

手册
上传图片

cnpm install mavon-editor --save

// main.js
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)
new Vue({
    'el': '#main',
    data() {
        return { value: '' }
    }
})

//使用
<div id="main">
    <mavon-editor v-model="body" ref="md" @imgAdd="imgAdd" style="height: 100%"/>
</div>
//methods
imgAdd(pos, $file){
  // 第一步.将图片上传到服务器sm.ms.
  var formdata = new FormData();
  formdata.append('smfile', $file);
  this.axios({
    url: 'https://sm.ms/api/v2/upload',
    method: 'post',
    data: formdata,
    headers: { 'Content-Type': 'multipart/form-data' },
  }).then((url) => {
    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
    console.log(899, url)
    this.$refs.md.$img2Url(pos, url.data.data.url)
  })
},


//解析成html文本
<mavon-editor
  class="md"
  :value="post.body"  //绑定的变量
  :subfield = "prop.subfield"
  :defaultOpen = "prop.defaultOpen"
  :toolbarsFlag = "prop.toolbarsFlag"
  :editable="prop.editable"
  :scrollStyle="prop.scrollStyle"
  ></mavon-editor>

computed: {
  prop () {
    let data = {
      subfield: false,
      defaultOpen: 'preview',
      editable: false,
      toolbarsFlag: false,
      scrollStyle: true
    }
    return data
  }
},