vue-使用markdown 编辑器

github项目地址

1、vue中下载安装
cnpm install mavon-editor --save

2、main.js全局引入
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

3、xxx.vue页面中使用
<mavon-editor style="height:400px;z-index:1" v-model="content" ref=md @imgAdd="$imgAdd" placeholder="请开始您的创作..." />

4、定义参数
export default {
data() {
return {
content:'',
}
}
}

5、方法中使用(自定义上传图片)
methods: {
// 绑定@imgAdd event
imgAdd(pos,file) {
// 第一步.将图片上传到服务器.
var formdata = new FormData();
formdata.append("image", file); axios({ url: 接口地址, method: "post", data: formdata, headers: { Authorization: Token值 } }).then(url => { if (!url)) { var imgurl = 图片基地址 + url.data.data; this.refs.md.img2Url(pos, imgurl); } else { this.message.error("上传失败");
}
});
}
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。