场景： WangEditor 富文本插件默认图片上传上去的格式是base64位的，
? ? ? ? ? ? ? ? 但是如果本地图片原始大小为1M，转成base64的话，就会变大，
? ? ? ? ? ? ? ? 所以改成上传至自己服务器
? ? ? ? ? ? ? ? 或者要求必须将图片传至自己服务器
?下载使用方式：
? ? ? ? 官网地址：Introduction · wangEditor 用户文档
? ? ? ? 一、下载WangEditor 插件：npm i wangeditor --save
? ? ? ? 二、在页面上定义一个文本域标签
????????????????
<el-form-item label="图文说明" :required="true" v-loading="wangeditorLoading" element-loading-text="拼命上传中"> <div id="e"></div> </el-form-item>? ? ? ? 还可以给上传图片时，加上传中的效果
????????
????????wangeditorLoading：上传中的初始状态
????????element-loading-text：状态底部的文字
????????
?
? ? ? ? 三、导入：
import E from "wangeditor";?? ? ? ? ? ? ? ??
四、初始化?及使用方式完整代码：
在data中定义上传中效果的初始状态：
wangeditorLoading:false,
mounted() {
this.$nextTick(() => {
this.initE();
this.editor.txt.html(this.desc);
})
},
methods: {
initE() {
var that = this;
this.editor = new E("#e");
//这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整
this.editor.config.menus = [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"emoticon", // 表情
"image", // 插入图片
"table", // 表格
"undo", // 撤销
"redo", // 重复
];
this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 10M
//this.editor.config.uploadImgShowBase64 = true // base 64 存储图片
this.editor.config.uploadImgTimeout = 15 * 1000//即上传接口等待的最大时间,默认是 10 秒钟，
this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 1 张图片
this.editor.config.showLinkImg = false; //隐藏网络图片上传
自定义上传图片-S
//这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整
this.editor.config.uploadFileName = 'file';
this.editor.config.uploadImgServer =process.env.BASE_API + '/common/upload'; //图片上传地址
this.editor.config.uploadImgHooks = {
before: function(xhr, editor, files) {
if(files.length!=0){
that.wangeditorLoading=true
}
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function(xhr, editor, result) {
console.log('success')
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象，result 是服务器端返回的结果
},
fail: function(xhr, editor, result) {
console.log('fail')
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象，result 是服务器端返回的结果
},
error: function(xhr, editor) {
console.log('error')
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象
},
timeout: function(xhr, editor) {
console.log('timeout')
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editors 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function(insertImg, result, editor) {
that.wangeditorLoading=false
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editors 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
console.log('上传了图片：',result.data);
// var url = that.$imageUrlVerify(result.data)
var url =process.env.VUE_APP_IMG +result.data[0].path;
insertImg(url);
// result 必须是一个 JSON 格式字符串！！！否则报错
}
};
自定义上传图片-E
this.editor.config.onchange = (html) => {
this.graphicDescription = html; // 绑定当前逐渐地值
// console.log(this.graphicDescription, "this.graphicDescription")
};
this.editor.config.placeholder = '请完善商品详情'//默认值
this.editor.create();
},
}