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，也就是用戶在上傳完成后需要點擊“確定”才能插入并隱藏當前編輯窗口，還有一個上傳成功的提示，如下圖所示：

上傳成功后，點擊“確定”才會把上傳的文件地址寫入目標文本框。

查閱源碼，我們了解到其調用的是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單獨調用文件上傳功能，并實現上傳完成自動隱藏（提交）