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 编辑器功能实现完成

现象如下：