vue項目接入markdown

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);
           })
        }
    }
}

完成！