vue 中实现markdown编辑器

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/huaweichenai/article/details/102698195

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

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

现象如下：