md解密 vue_vue 中实现markdown编辑器

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

一：下载mavon-editor

npm install mavon-editor

二：mavon-editor使用

html代码：

js代码:

前提：需要引入mavon-editor

import { mavonEditor } from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

完整的js代码如下：

// 导入组件 及 组件样式

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)

}

})

},

},

}

上面使用到了调取外部接口进行上传，调取外部接口方法可参考：vue.js结合axios实现跨域访问接口

到此在vue中实现markdown编辑器功能实现完成

现象如下：