mavon-editor 使用教程，上傳圖片，以及配置， 並且接續存儲的md格式的數據

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

安裝

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>

效果如下

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

 <mavon-editor
     v-model="form.content"
     ref="md"
     @imgAdd="handleEditorImgAdd"
     @imgDel="handleEditorImgDel"
 />

@imgAdd @imgDel 分別是添加圖片和刪除圖片

具體代碼如下

        handleEditorImgAdd (pos, $file) {
            let formdata = new FormData()
            formdata.append('file', $file)
            this.imgFile[pos] = $file
            let instance = this.$axios.create({
                withCredentials: true,
                headers: {
                    Authorization: token   // 我上傳的時候請求頭需要帶上token 驗證，不需要的刪除就好
                }
            })
            instance.post('/api/upload/fileds', formdata).then(res => {
                if (res.data.code === 200) {
                    this.$Message.success('上傳成功')
                    let url = res.data.data
                    let name = $file.name
                    if (name.includes('-')) {
                        name = name.replace(/-/g, '')
                    }
                    let content = this.form.content
                    // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)  這裏是必須要有的
                    if (content.includes(name)) {
                        let oStr = `(${pos})`
                        let nStr = `(${url})`
                        let index = content.indexOf(oStr)
                        let str = content.replace(oStr, '')
                        let insertStr = (soure, start, newStr) => {
                            return soure.slice(0, start) + newStr + soure.slice(start)
                        }
                        this.form.content = insertStr(str, index, nStr)
                    }
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        handleEditorImgDel (pos) {
            delete this.imgFile[pos]
        },

這裏需要注意
this.$axios 其實就是 axios 對象，

下邊是其他配置

//mavon-editor菜單欄的相關配置
把toolbars 對象綁定到 mavon-editor組件上

toolbars: {
   bold: true, // 粗體
   italic: true, // 斜體
   header: true, // 標題
   underline: true, // 下劃線
   strikethrough: true, // 中劃線
   mark: true, // 標記
   superscript: true, // 上角標
   subscript: true, // 下角標
   quote: true, // 引用
   ol: true, // 有序列表
   ul: true, // 無序列表
   link: true, // 鏈接
   imagelink: true, // 圖片鏈接
   code: true, // code
   table: true, // 表格
   fullscreen: true, // 全屏編輯
   readmodel: true, // 沉浸式閱讀
   htmlcode: true, // 展示html源碼
   help: true, // 幫助
   /* 1.3.5 */
   undo: true, // 上一步
   redo: true, // 下一步
   trash: true, // 清空
   save: false, // 保存（觸發events中的save事件）
   /* 1.4.2 */
   navigation: true, // 導航目錄
   /* 2.1.8 */
   alignleft: true, // 左對齊
   aligncenter: true, // 居中
   alignright: true, // 右對齊
   /* 2.2.1 */
   subfield: true, // 單雙欄模式
   preview: true, // 預覽
},

二我選擇的是直接將md格式的文本保存到數據庫中，然後再將其從數據庫中取出來解析。
md格式的文本的解析

使用marked框架來解析。

方法步驟：

npm install marked --save

在組件中引用：

import marked from ‘marked‘

相應的標籤：

<div v-html="readmeContent" ></div>

js方法：

//這裏的newDate[0].content就是取出來的md格式的文本內容  
this.readmeContent=marked(newData[0].content||‘‘,{
   sanitize:true
})

存在問題：現在純粹的只是將其解析成了html文件，相應的樣式查了下，可以用highlight.js，但折騰了好久都沒引用成功，最後爲了應急，只能自己手寫樣式了。等之後再仔細看看marked的官方文檔再說…

參考地址
http://www.mamicode.com/info-detail-2644873.html
https://www.jianshu.com/p/78ea4f94a3d0