1.通过image插件正常上传的图片可以在回调方法内限制图片大小。
效果:
代码:
tinymce.init({ selector: '#tinydemo', plugins: 'image paste code link lists table preview save', toolbar: 'image', height:500, language:'zh_CN', file_picker_types: 'image', paste_data_images: true, images_upload_handler: function (blobInfo, success, failure, progress) { var reader = new FileReader(); var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败 reader.readAsDataURL(blobInfo.blob()); reader.onload = function () { if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) { failure("上传失败,请上传不大于2M的图片!"); return; }else{ //执行上传操作 success(this.result); alert(reader.result); } } } });
2.通过paste插件直接粘贴过来的图片。
问题:虽然粘贴来的经过images_upload_handler方法,会有报错信息,但是不能阻止图片上传,依然可以上传成功。
解决方案:
修改paste插件上传文件的代码 路径:tinymce\plugins\paste\plugin.min.js
代码:
return new ge(function (e) { var t = P(r.getAsFile) ? r.getAsFile() : r, n = new window.FileReader; var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败 n.onload = function () { if (AllowImgFileSize != 0 && AllowImgFileSize < n.result.length) { alert("上传失败,请上传不大于2M的图片!"); return; } e({blob: t, uri: n.result}) }, n.readAsDataURL(t) })
效果:
小提示:
1.如何开启了paste插件,却不能复制粘贴图片的,可能是浏览器不支持,建议用谷歌。
2.更改后,好像限制的是所有上传的文件大小,不仅仅针对于图片。后续有其他个性化需求,可以再自行改造。