关键词：
UEditor支持单图、多图以及视频上传，编辑器配置项支持文件格式、文件大小校验，对于文件宽高尺寸校验暂不支持。这里记录一下自定义图片、视频尺寸校验过程，内容核心主要是扩展校验逻辑和增加自定义提示文本。
单图上传
单图上传的逻辑在ueditor.all.js中，由simpleUpload组件实现，其内部是通过监听file输入框的变化，来进行文件校验和上传。
下图initUploadBtn为初始化简单上传按钮方法，也是进行相关校验的地方。
initUploadBtn里默认校验代码如下：
var form = btnIframeDoc.getElementById(‘edui_form_‘ + timestrap);
var input = btnIframeDoc.getElementById(‘edui_input_‘ + timestrap);
var iframe = btnIframeDoc.getElementById(‘edui_iframe_‘ + timestrap);
domUtils.on(input, ‘change‘, function()
if(!input.value) return;
// 省略部分代码
/* 判断后端配置是否没有加载成功 */
if (!me.getOpt(‘imageActionName‘))
errorHandler(me.getLang(‘autoupload.errorLoadConfig‘));
return;
// 判断文件格式是否错误
var filename = input.value,
fileext = filename ? filename.substr(filename.lastIndexOf(‘.‘)):‘‘;
if (!fileext || (allowFiles && (allowFiles.join(‘‘) + ‘.‘).indexOf(fileext.toLowerCase() + ‘.‘) == -1))
showErrorLoader(me.getLang(‘simpleupload.exceedTypeError‘));
return;
// 校验通过，上传文件
domUtils.on(iframe, ‘load‘, callback);
form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf(‘?‘) == -1 ? ‘?‘ : ‘&‘) + params);
form.submit();
);
可以看到这里有好几处判断逻辑，全部通过后才提交表单上传文件。对于图片视频的尺寸校验，同样也可以加在这里，通过后才提交，以下为修改后的代码：
var form = btnIframeDoc.getElementById(‘edui_form_‘ + timestrap);
var input = btnIframeDoc.getElementById(‘edui_input_‘ + timestrap);
var iframe = btnIframeDoc.getElementById(‘edui_iframe_‘ + timestrap);
domUtils.on(input, ‘change‘, function()
if(!input.value) return;
// 省略部分代码
/* 判断后端配置是否没有加载成功 */
if (!me.getOpt(‘imageActionName‘))
errorHandler(me.getLang(‘autoupload.errorLoadConfig‘));
return;
// 判断文件格式是否错误
var filename = input.value,
fileext = filename ? filename.substr(filename.lastIndexOf(‘.‘)):‘‘;
if (!fileext || (allowFiles && (allowFiles.join(‘‘) + ‘.‘).indexOf(fileext.toLowerCase() + ‘.‘) == -1))
showErrorLoader(me.getLang(‘simpleupload.exceedTypeError‘));
return;
//校验文件尺寸宽度
var files = this.files;
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (theFile)
var image = new Image();
image.src = theFile.target.result;
image.onload = function ()
if (this.width < 1080)
showErrorLoader(‘宽度小于1080‘);
return;
// 校验通过，上传文件
domUtils.on(iframe, ‘load‘, callback);
form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf(‘?‘) == -1 ? ‘?‘ : ‘&‘) + params);
form.submit();
;
;
);
代码中的校验参数1080，和提示文本规范作法是加在配置文件中，这里只起演示作用。
新增的尺寸校验，是使用FileReader读取上传的文件获得宽高，进而能够实现相关尺寸或者比例判断，校验效果如下：
多图上传
多图上传主要涉及三个文件，image.html、webupload.js和image.js。
webupload.js包含各种验证，包括文件总大小是否超出、单文件是否超出、文件是否重复等等，这里也可以增加自定义验证，它们会在Uploader初始化时被一并加载。
新增自定义图片尺寸校验方法如下：
/**
* @property int [fileSingleWidth=undefined]
* @namespace options
* @for Uploader
* @description 验证单个文件尺寸满足要求, 不满足则不允许加入队列。
*/
//======================
api.addValidator(‘fileSingleWidth‘, function ()
var uploader = this,
opts = uploader.options,
minWidth = 1080;
uploader.on(‘beforeFileQueued‘, function (file)
let that = this;
let type = file.type;
window.URL = window.URL || window.webkitURL;
var reader = new FileReader();
reader.readAsDataURL(file.source.source);
reader.onload = function (theFile)
var image = new Image();
image.src = theFile.target.result;
image.onload = function ()
if (this.width < minWidth)
file.setStatus(WUFile.Status.INVALID, ‘exceed_width‘);
that.trigger(‘error‘, ‘F_EXCEED_SIZE‘, file);
that.removeFile(file);
return false;
;
);
);
校验逻辑写好后，需要在image.js的addFile方法中增加提示文本。
校验效果：
视频上传
视频上传同样也包含三个文件，video.html、webupload.js和video.js，处理逻辑与多图上传一样。我们可以在上面校验图片宽度的基础上再扩展支持校验视频分辨率是否小于720，代码如下：
/**
* @property int [fileSingleWidth=undefined]
* @namespace options
* @for Uploader
* @description 验证单个文件尺寸满足要求, 不满足则不允许加入队列。
*/
//======================
api.addValidator(‘fileSingleWidth‘, function ()
var uploader = this,
opts = uploader.options,
minWidth = 1080;
uploader.on(‘beforeFileQueued‘, function (file)
let that = this;
let type = file.type;
window.URL = window.URL || window.webkitURL;
// 校验视频分辨率
if (type.indexOf(‘video‘) > -1)
var video = document.createElement(‘video‘);
video.preload = ‘metadata‘;
video.src = URL.createObjectURL(file.source.source);
video.onloadedmetadata = () =>
URL.revokeObjectURL(video.src);
if (video.videoHeight < 720)
file.setStatus(WUFile.Status.INVALID, ‘exceed_height‘);
that.trigger(‘error‘, ‘F_EXCEED_SIZE‘, file);
that.removeFile(file);
return false;
else
//校验图片宽度
var reader = new FileReader();
reader.readAsDataURL(file.source.source);
reader.onload = function (theFile)
var image = new Image();
image.src = theFile.target.result;
image.onload = function ()
if (this.width < minWidth)
file.setStatus(WUFile.Status.INVALID, ‘exceed_width‘);
that.trigger(‘error‘, ‘F_EXCEED_SIZE‘, file);
that.removeFile(file);
return false;
;
);
);
vedio.js的addFile方法中增加校验文本
校验效果：
vuequilleditor自定义图片/视频上传（elementui+oss）字体字体大小段落等(代码片段)
...用富文本编辑器，开始想到的富文本编辑器是百度的UEditor，UEditor功能齐全、插件多，但是图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，而且是PHP、JSP、ASP、.Net版本，同时UEditor... 查看详情
ueditor上传的图片在内容里显示的尺寸过大的问题(代码片段)
...了滚动条，想让他自适应100%，不出现滚动条网上有方法1.ueditor的themes文件夹下有个iframe.css加入以下代码，保存（原先的css文件应该是空的，只有一行注释）///个人感觉没用，调试了一下确实没用不知为什么，放在这了img &nbs... 查看详情
vuequilleditor自定义图片/视频上传（elementui+oss）字体字体大小段落等(代码片段)
...用富文本编辑器，开始想到的富文本编辑器是百度的UEditor，UEditor功能齐全、插件多，但是图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，而且是PHP、JSP、ASP、.Net版本，同时UEditor... 查看详情
百度ueditor富文本上传图片(代码片段)
项目中使用UEditor发现设置图片自定义保存路径会出现《请求后台配置项http错误，上传功能将不能正常使用！错误》/*上传图片配置项*/"imageActionName":"uploadimage",/*执行上传图片的action名称*/"imageFieldName":"inputForm",/*提交的图片表单... 查看详情
ueditor控制上传图片的显示尺寸
使用UEditor的编辑框插入图片的时候，如果图片尺寸比较大，则图片会超出编辑器边框出现滚动条，特别不方便。 解决办法：在ueditor的themes文件夹下有个iframe.css文件，在该文件中添加如下代码即可解决（本人亲测）：img{max-w... 查看详情
ueditor上传图片后自定义样式类名
Ueditor是百度的一个富文本插件，如果使用者会前端语言的话，那适用性就很好，特别是现在移动端纵横的情况。但往往使用者并不懂编程，要让他们使用前端语言的话是不可能的，这就需要我们在开发时就定义好整个样式。正... 查看详情
javaspringboot中自定义参数校验(代码片段)
dedecms自定义模型内容调用多个ueditor(代码片段)
关于dedecms后台如何整合百度编辑器(ueditor)网上有很多了，本站就不再赘述了，主要问题是，涉及到如果有内容模型的修改，则按照网络上介绍的方法会发现有BUG。当修改过默认的文章模型或者其他模型，有添加自定义字段，字... 查看详情
以自定义尺寸阅读图库视频
】以自定义尺寸阅读图库视频【英文标题】：ReadGalleryVideoinCustomSize【发布时间】：2019-05-1808:35:07【问题描述】：我如何从Gallery(照片)获取自定义格式和大小的视频。例如，我想阅读360p视频。我使用下面的代码来获取视频数据，... 查看详情
spring自定义校验注解(代码片段)
自定义校验电话号码注解@Target(ElementType.METHOD,ElementType.FIELD,ElementType.ANNOTATION_TYPE)@Retention(RetentionPolicy.RUNTIME)@Constraint(validatedBy=TelNumber.TelNumberValidator.class)@D 查看详情
php添加自定义图像尺寸(代码片段)
php[自定义图像尺寸]添加自定义尺寸图像（上传媒体时的新尺寸）#wordpress#php(代码片段)
element-ui表单自定义校验(代码片段)
...全解决不了问题。2.解决方法使用elementui表单校验中的自定义校验，validUsername是自定义的校验方法名称2.1定义表单校验：rules:userTypeId:[required:true,message:' 查看详情
百度富文本编辑器ueditor自定义上传图片接口
如下图： 然后修改ueditor.all.js 查看详情
vue之ueditor自定义单图上传返回格式(代码片段)
项目使用Ueditor单图上传，不想因为一个上传就去更改数据返回的格式，也不想用后端的源码，那自己改一下好了！我后台返回格式如下：status:0,msg:'',data:查看了半天源代码，眼睛都看花了。。。... 查看详情
phpacf-具有自定义尺寸的图像(代码片段)
react自定义表单校验规则(代码片段)
最近项目中需要自定义表单的校验规则，特此记录便于日后查阅。<Form.Itemlabel="分类名称"name="name"rules=[required:true,message:'请输入分类名称',validator:(_,value)=>returnvalue.leng 查看详情
自定义表单-校验数据规则(代码片段)
使用async-validator库,校验数据是否合法，并且根据校验规则给出提示信息。https://github.com/yiminghe/async-validator必填不能为空"required":true,"message":"请输入内容","trigger":"blur",下拉框、单选框、复选框等用trigger:‘change‘输入框、文本域... 查看详情