聯系信息

                        KindEditor單獨調用文件上傳功能,并實現上傳完成自動隱藏(提交)

                        2020-11-30 11:17 By 致遠 2488
                        當前位置: 企業網站建設 > 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單獨調用文件上傳功能,并實現上傳完成自動隱藏(提交)

                        留下您的評論

                        > 人人爽人人澡人人高潮_免费无码国产V片在线观看_18禁裸乳无遮挡免费观看_国产99在线 | 欧美_中文字幕无码无码专区 熟妇女领导呻吟疯狂 成人免费看的A级毛片 国产日韩AV无码免费一区二区三 国产乱子伦精品免费无码专区 尤物爆乳AV导航 男男喷液抽搐高潮呻吟AV 亚洲综合久久一区二区 中文字幕久久综合伊人 亚洲AV永久无码一区二区三区 99久久99久久精品免费看蜜桃