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單獨調用文件上傳功能,并實現上傳完成自動隱藏(提交)