基於vue的markdown編輯器——mavon-editor使用

mavon-editor是一款基於vue的markdown編輯器，比較適合博客系統。由於官網對於一些細節的說明不夠詳細，這里對這里對該編輯器的使用做一個總結。

1. 安裝

2. 基本使用

3. 圖片上傳(含服務端)

安裝

npm install mavon-editor --save

基本使用

在vue-cli構建的腳手架離得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'
    })

在具體的組件里html里定義掛載點

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

效果

圖1.1

圖片上傳：
先將掛在點里的方法寫好，就像這樣

 <el-main class="content-content">
     <mavon-editor 
     v-model = 'editorContent'
     :ishljs="true"
      :codeStyle="code_style"
     ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"
      />
 </el-main>

主要是將ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"放進去，其他是我的其他代碼。
然后定義$imgAdd和$imgDel方法:

// 綁定@imgAdd event
$imgAdd(pos, $file) {
    // 第一步.將圖片上傳到服務器.
    var formdata = new FormData();
    formdata.append('image', $file);
    this.img_file[pos] = $file;
    this.$http({
        url: '/api/edit/uploadimg',
        method: 'post',
        data: formdata,
        headers: { 'Content-Type': 'multipart/form-data' },
    }).then((res) => {
        let _res = res.data;
        // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
        this.$refs.md.$img2Url(pos, _res.url);
    })
},
$imgDel(pos) {
    delete this.img_file[pos];
}

這里注意我的this.$https就是我的axios對象（用過vue-cli的都懂的），然后this.img_file是我之前定義的一個空對象。this.$refs.md和掛在點定義的要保持一致。
剩下的就是交給服務端去處理了：
koa解決文件上傳

原文鏈接：https://www.jianshu.com/p/78ea4f94a3d0