51dev.com IT技术开发者社区

51dev.com 技术开发者社区

kindeditor 使其支持配置上传路径,限制上传图片大小(java)

IT猿阅读(23)2019-11-09 收藏0次评论

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),修改其值就可以了。
当然,这个也可以做成配置。

以上就是kindeditor 使其支持配置上传路径,限制上传图片大小(java)的全部内容。

相关内容