vue 項目接入 markdown

最近做一個項目，需要在vue項目中接入 markdown 編輯器，其實這個好接，他沒有什么特別的樣式，男的就是圖片的上傳。
今天給大家推薦一個插件 ：mavonEditor
這個是他的github：https://github.com/hinesboy/mavonEditor/blob/master/README.md

這個插件支持自定義界面，代碼高亮，圖片上傳等，是我見過最好的一個。
他的使用方法在github上寫的很詳細，可以去里面看。

安裝

安裝命令

	$ npm install mavon-editor --save 或者
	$ yarn add mavon-editor

在 main.js 中引入

    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    Vue.use(mavonEditor)

使用mavonEditor編輯markdown

在需要引入markdown編輯器的界面

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

<script>
export default {
    data() {
        return {
            value: '',
            defaultData: "preview"
        };
    },
};
</script>

使用v-html展示markdown

<article v-html="value" ></article>

<script>
export default {
    data() {
        return {//value的值是經過markdown解析后的文本，可使用`@change="changeData"`在控制台打印顯示
            value: `<blockquote>
									<p>你好</p>
									</blockquote>
									<p><code>java</code></p>`,
            defaultData: "preview"
        };
    },
    methods: {
    }
};
</script>

圖片上傳

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 綁定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.將圖片上傳到服務器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指為mavonEditor實例，可以通過如下兩種方式獲取
               * 1. 通過引入對象獲取: `import {mavonEditor} from ...` 等方式引入后，`$vm`為`mavonEditor`
               * 2. 通過$refs獲取: html聲明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`為 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}

完成！