安装
npm install mavon-editor --save
基本使用
全局注册(main.js
代码语言：javascript复制import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)局部注册
代码语言：javascript复制import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
data: function() {
return {
content: ""
};
},
components: {
mavonEditor
},
}注：我这边尝试局部注册，会提示以下错误，暂时无解，只能选择全局的方式
代码语言：javascript复制[Vue warn]: Failed to mount component: template or render function not defined.使用
代码语言：javascript复制<mavon-editor v-model="content"/>图片上传和回显
注册方式同上，使用如下
代码语言：javascript复制<mavon-editor v-model="ruleForm.content" ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"/>
...
$imgAdd(pos, file){
// 将图片上传到服务器(formdata方式
// var formdata = new FormData();
// formdata.append('image', $file);
// (x-www-form-urlencoded方式
let _this = this;
let data = {};
this.uploadFile(file).then(async function(file){
data.content = file.result.substr(22);
data.type=file.type;
data.width=file.width;
data.height=file.height;
data.size=file.size;
data.title=file.name;
let result=await addFile(data);//网络请求
if(result.err===0){
_this.$message({type:'success', message:'上传成功', duration:1000});
_this.$refs.md.$imglst2Url([[pos, result.data.url]])
}else{
_this.$message({type:'error', message:result.msg, duration:1000});
}
});
},
//获取reader的result
uploadFile:function (file){
return new Promise(function(resolve, reject){
let reader = new FileReader()
reader.readAsDataURL(file);
//reader.readAsArrayBuffer(file)
reader.onload = function(){
file.result=this.result;
let image = new Image()
image.src = this.result
image.onload = function() {
file.width=this.width;
file.height=this.height;
resolve(file)
}
}
})
},
$imgDel(pos){
console.log(pos);//["//blog.cw.net/data/upload/2021-05-11/162072210359836.jpg", file]
#关于删除，仅仅是当前添加的可以删除；如果是从数据库读出来的，就没有删除按钮了
},
...
