kindeditor 使其支持配置上传路径，限制上传图片大小（java）

以你之姓@ 2022-10-01 00:40 426阅读 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），修改其值就可以了。  
当然，这个也可以做成配置。