前端項目集成mavon-editor的Markdown插件，並回顯到網頁上

mavon-editor簡介

mavon-editor是一款基於Vue的markdown編輯器。

詳細使用請參看mavon-editor在碼雲倉庫的介紹：https://gitee.com/zvlance/mavonEditor

mavon-editor的使用

組件引入

安裝

	npm install mavon-editor --save

全局引入

一般使用全局引入，如果想使用其他方式引入，推薦上文的碼雲倉庫介紹

main.js

	import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    //vue的使用略......

使用

使用的方式非常簡單

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

v-model綁定的就是mavon-editor編輯器中寫的md內容。

具體的API參看上文提到的碼雲倉庫

mavon-editor中的圖片上傳

除了圖片上傳需要配置圖片上傳的服務器地址外，其餘mavon-editor編輯器中的操作基本不需要配置。

方式1：每次添加圖片直接觸發上傳

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 綁定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.將圖片上傳到服務器.
           var formdata = new FormData();
           //這裏的'image'即對應的是後臺需要接受的參數名，如果有有配置，則需要和後臺的參數名對應
           formdata.append('image', $file);
           axios({
               url: 'server url',  //圖片上傳接口路徑
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
               // 圖片回顯到編輯器添加圖片的位置
               $vm.$img2Url(pos, url);
               //或者使用以下方式回顯
               //this.$refs.md.$img2Url(pos, url);
           })
        },
        $imgDel(pos) {
			//刪除圖片的業務，可根據具體需求實現
		},
    }
}

方式1：保存時統一上傳多張圖片

<template>
    <!--點擊按鈕觸發圖片統一上傳-->
    <button @click="uploadimg">upload</button>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    data(){
        return {
            img_file: {}
        }
    },
    methods: {
        // 綁定@imgAdd event
        $imgAdd(pos, $file){
            // 緩存圖片信息
            this.img_file[pos] = $file;
        },
        $imgDel(pos){
        	//刪除緩存的指定的圖片
            delete this.img_file[pos];
        },
        uploadimg($e){
            // 第一步.將圖片上傳到服務器.
            var formdata = new FormData();
            for(let _img in this.img_file){
                formdata.append(_img, this.img_file[_img]);
            }
            axios({
                url: 'server url',   //圖片上傳接口路徑
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((res) => {
                /**
                 * 例如：返回數據爲 res = [[pos, url], [pos, url]...]
                 * pos 爲原圖片標誌（0）
                 * url 爲上傳後圖片的url地址
                 */
                 // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
                for (var img in res) {
                    // $vm.$img2Url 詳情見本頁末尾
                    $vm.$img2Url(img[0], img[1]);
                }
            })
        },
    }
}

修改mavon-editor的默認樣式

mavon-edito編輯器默認大小樣式爲 min-height: 300px , min-width: 300px。可通過覆蓋直接設置樣式，否則默認編輯器的大小不能鋪滿屏幕。

保存mavon-editor編輯器到數據庫

v-model綁定的是mavon-editor編輯器中寫的md格式的內容。
但是爲了方便到時候將md格式的數據回顯到網頁上，我們需要將html的數據一併上傳到數據庫。

this.$refs.md.d_render的值爲mavon-editor編輯器生成的html格式的數據（暫定爲contentMarkDown），可直接保存在數據庫。

this.$refs.md.d_value的值爲mavon-editor編輯器生成的md格式的數據暫定爲contentHtml），相當於v-model綁定的值。

使用mavon-editor修改上傳到數據庫中的數據

通過後臺接口查詢數據庫存儲的contentMarkDown的數據，令其等於mavon-editor綁定的v-model的值，即可實現md格式的數據回顯到mavon-editor的編輯器當中。
ps：具體的查詢數據庫數據和數據綁定，略…
重新編輯md格式的數據，上傳到數據庫，但是一定要注意，需要重新生成HTML格式的數據，同步更新contentHtml，否則回顯的數據不能得到及時更新。

回顯mavon-editor的數據

1.在vue-cli項目中回顯

可以直接利用mavon-editor的v-html屬性回顯，其中contentHtml即爲當時保存在數據庫中mavon-editor生成的html數據。

	<div class="mavonEditor">
        <mavon-editor v-html="contentHtml"/>
    </div>

向後臺發送請求，查詢contentHtml，與v-html進行綁定，即可實現回顯。

2.在普通的H5網頁中回顯

還是先查詢數據庫中contentHtml的數據，然後利用jquery的html()方法或者js的innerHTML屬性直接回顯html數據。

	<div id="blog-content" class="markdown-body"></div>
	<script>
		$("#blog-content").html(blogDetail.blogInfos.blog.contentHtml);
	</script>

問題

1.回顯的html顯示問題，沒有樣式

如果是在vue-cli項目中

在你需要展示html的模塊引入import "mavon-editor/dist/css/index.css"

如果是在H5項目

使用cdn引入樣式
cdn樣式地址：https://cdnjs.com/libraries/github-markdown-css

<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.css" rel="stylesheet">

2.mavonEditor 有序無序列表不能顯示數字和小原點的問題

問題原因：ul、li、ol等標籤的樣式被覆蓋了
解決：在這個div中重新設置樣式

/*解決mavonEditor 有序無序列表不顯示 common.css樣式衝突*/
ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    list-style: inherit;
}

3.mavonEditor回顯圖片時，圖片大小超出父級div，圖片溢出

給回顯數據的div的所有img設置max-width,如果超出max-width則圖片會進行等比例縮放（一般設置比父級div小一些即可）

我的父級div的id是blog-content

#blog-content img {
    max-width: 800px;
}

快速搞懂前端項目如何集成Markdown插件mavon-editor，並回顯數據到網頁