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
file) {
// 第一步.将图片上传到服务器.
var formdata = new FormData();
formdata.append("image", %3B%20axios(%7B%20url%3A%20%E6%8E%A5%E5%8F%A3%E5%9C%B0%E5%9D%80%2C%20method%3A%20%22post%22%2C%20data%3A%20formdata%2C%20headers%3A%20%7B%20Authorization%3A%20Token%E5%80%BC%20%7D%20%7D).then(url%20%3D%3E%20%7B%20if%20(!url))%20%7B%20var%20imgurl%20%3D%20%E5%9B%BE%E7%89%87%E5%9F%BA%E5%9C%B0%E5%9D%80%20%2B%20url.data.data%3B%20this.)
%3B%20%7D%20else%20%7B%20this.)
}
});
}
}
网友评论