vue 中實現markdown編輯器

在vue中使用markdown我使用到了mavon-editor組件，mavon-editor組件github地址：https://github.com/hinesboy/m...

一：下載mavon-editor

npm install mavon-editor

二：mavon-editor使用

html代碼：

<template>
<div>
<mavon-editor v-model="content" ref="md" @change="change" @imgAdd="$imgAdd" style="min-height: 600px" />
</div>
</template>

js代碼:

前提：須要引入mavon-editor

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

完整的js代碼以下：

<script type="text/ecmascript-6">
// 導入組件 及 組件樣式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
 components: {
        mavonEditor,//mavon-editor組件
    },
data() {
 return {
            content:'', // 輸入的markdown
            html:'',    // 轉成的html
        }
},
methods: {
    change(value, render) {
        //實時獲取轉成html的數據
        this.html = render
        console.log(this.html)
    },
    // 將圖片上傳到服務器，返回地址替換到md中 
    $imgAdd(pos, $file){ 
        let formdata = new FormData(); 
     formdata.append('image', $file);
     this.$ajax({
       url: 'http://local.basic.com/index.php?r=markdown/upload',
       method: 'post',
       data: formdata,
     }).then((data) => {
        //將返回的url替換到文本原位置
               if (data.data.success == 1) {
               this.$refs.md.$img2Url(pos, data.data.url);
               console.log(data.data.url)
               }
               
           })
},
},
}
</script>

上面使用到了調取外部接口進行上傳，調取外部接口方法可參考：vue.js結合axios實現跨域訪問接口

上傳接口能夠參考：html+js 實現markdown編輯器效果 中的上傳接口

到此在vue中實現markdown編輯器功能實現完成

現象以下：