kindeditor是一个很好的富文本编辑器。但是也有部分功能需要自己二次开发。
在开发过程中,碰见了一个尴尬的问题,kindeditor不支持前端验证图片的大小。
但是实际js是可以做到验证图片的size的。
function getImgSize(field_id){
//field_id 是<input type="file" id="field_id"/>
var fileInput = $("#field_id")[0];
console.info(fileInput.files[0])
byteSize = fileInput.files[0].size;
return ( Math.ceil(byteSize / 1024) ); // Size returned in KB.
}
既然前端可以支持获取图片大小,那么kindeditor必定支持限制图片大小。
进入:/kindeditor/plugins/image/image.js,查询:insert local image
源代码:
// insert local image
if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) {
if (uploadbutton.fileBox.val() == '') {
alert(self.lang('pleaseSelectFile'));
return;
}
dialog.showLoading(self.lang('uploadLoading'));
uploadbutton.submit();
localUrlBox.val('');
return;
}
可以发现这串代码是用来上传图片的。
改下:
// insert local image
if (showLocal && showRemote && tabs && tabs.selectedIndex === 1 || !showRemote) {
if (uploadbutton.fileBox.val() == '') {
alert(self.lang('pleaseSelectFile'));
return;
}
if(uploadbutton.fileBox[0].files[0].size>imageMaxSize){
alert("图片不能大于10M");
return;
}
dialog.showLoading(self.lang('uploadLoading'));
uploadbutton.submit();
localUrlBox.val('');
return;
}
imageMaxSize需要我们自己定义:
还是在image.js中,搜索:self.allowImageRemote
修改后的代码
var self = this, name = 'image',
allowImageUpload = K.undef(self.allowImageUpload, true),
allowImageRemote = K.undef(self.allowImageRemote, true),
formatUploadUrl = K.undef(self.formatUploadUrl, true),
allowFileManager = K.undef(self.allowFileManager, false),
imageMaxSize =( K.undef(self.imgMaxSize, 10*1024*1024) ),
//uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),
uploadJson = K.undef(self.uploadImgPath, "/upload");
imageTabIndex = K.undef(self.imageTabIndex, 0),
imgPath = self.pluginsPath + 'image/images/',
extraParams = K.undef(self.extraFileUploadParams, {}),
filePostName = K.undef(self.filePostName, "fileName"),
fillDescAfterUploadImage = K.undef(self.fillDescAfterUploadImage, false),
lang = self.lang(name + '.');
这里我定义了1个值:imageMaxSize ,用来设置大小。
修改了两个变量uploadJson和filePostName ,这两个变量的作用分别是设置上传地址,设置上传的图片的名称。
key为我们在实例化kindeditor时的配置。
KindEditor.ready(function(K) {
var options = {
cssPath : '/kindeditor/plugins/code/prettify.css',
uploadImgPath : '/image/upload',
filePostName : 'imgFile',
imgMaxSize : 10*1024*1024,
uploadJson : '',
fileManagerJson : '',
allowFileManager : false,
allowImageRemote : false,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
},
afterBlur : function() {
this.sync();
},
items : [ 'undo', 'redo', '|', 'preview', '|', 'justifyleft',
'justifycenter', 'justifyright', 'justifyfull',
'insertorderedlist', 'insertunorderedlist', '|',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor',
'hilitecolor', 'bold', 'italic', 'underline',
'strikethrough', '|', 'image', 'table', 'emoticons',
'link', 'unlink', 'fullscreen' ],
};
var editor1 = K.create('textarea[name="chunkContentFirst"]', options);
options中,我配置了option:uploadImgPath ,filePostName ,imgMaxSize 。
如果我不配置filePostName ,那么filePostName =”fileName”。
allowImageUpload = K.undef(self.xx, true),
左边不存在,则右边为替代值。
另外:kindeditor选择图片的地方有这个显示着:上传文件(不超过2M)
如何修改这个值?进入/kindeditor/zh-CN.js
搜索:上传文件(不超过2M),修改其值就可以了。
当然,这个也可以做成配置。
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。