联系信息

KindEditor单独调用文件上传功能,并实现上传完成自动隐藏(提交)

2020-11-30 11:17 By 致远 654
当前位置: 企业网站建设 > KindEditor > KindEditor单独调用文件上传功能,并实现上传完成自动隐藏(提交)

Kindeditor是我一直使用的html编辑器,做企业网站一般很少用到文件上传,所以没有深究,今日做一个b2b,需要用户上传报价单(word或excel格式),发现上传完成之后还需要点击“确定”才能插入上传内容并隐藏编辑器,实在繁琐,于是看了一下源码,发现要实现单独调用Kindeditor文件上传功能,并实现上传完成后自动隐藏、提交其实很简单!

先看一下原始代码(官网提供的):


KindEditor.ready(function(K) {
    var editor = K.editor({
        allowFileManager : true
    });
    K('#insertfile').click(function() {
        editor.loadPlugin('insertfile', function() {
            editor.plugin.fileDialog({
                fileUrl : K('#url').val(),
                clickFn : function(url, title) {
                    K('#url').val(url);
                    editor.hideDialog();
                }
            });
        });
    });
});


代码本身没有问题,问题是clickFn,也就是用户在上传完成后需要点击“确定”才能插入并隐藏当前编辑窗口,还有一个上传成功的提示,如下图所示:

KindEditor调用文件上传功能

上传成功后,点击“确定”才会把上传的文件地址写入目标文本框。

查阅源码,我们了解到其调用的是plugins下的insertfile.js文件,我们打开该文件就会发现afterUpload后有“alert(self.lang('uploadSuccess'));”字样,大致就是上传成功的弹窗了。下面直接修改即可:

先看调用代码:


K('#picBtn2').click(function() {
    editor.loadPlugin('insertfile', function() {
        editor.plugin.fileDialog({
            fileUrl : K('#file').val()
            //这里直接去掉clickFn相关内容即可
        });
    });
});


insertfile.js文件也需要修改,首先屏蔽alert弹窗,然后需要把上传成功的文件地址写入目标文本框,并隐藏编辑器:


afterUpload : function(data) {
    dialog.hideLoading();
    if (data.error === 0) {
        var url = data.url;
        if (formatUploadUrl) {
            url = K.formatUrl(url, 'absolute');
        }
        urlBox.val(url);
        if (self.afterUpload) {
            self.afterUpload.call(self, url, data, name);
        }
        K('#file').val(url);//文件地址写入目标文本框
        self.hideDialog();//隐藏编辑器
        //alert(self.lang('uploadSuccess'));//屏蔽弹窗
    } else {
        alert(data.message);
    }
},


© 致远 2020-11-30,原创内容,转载请注明出错:KindEditor单独调用文件上传功能,并实现上传完成自动隐藏(提交)

留下您的评论

>