KindEditor加入附件上传功能

最新推荐文章于 2021-03-17 03:17:14 发布

最新推荐文章于 2021-03-17 03:17:14 发布 · 663 阅读

文章标签：

#php #json

本文详细介绍了如何修改KindEditor插件的代码，以解决上传本地文件后未自动返回编辑区并显示文件下载链接的问题。通过增加额外的处理逻辑，实现了文件上传成功后跳转回编辑区并显示下载链接的功能。

这是别人给出的方法：http://www.cnblogs.com/baiyuntian/archive/2011/11/07/2239475.html

我就是依照此方法来加入附件上传功能的

但在实现的时候出现了问题：选择本地文件上传，显示文件上传成功，但不会自动返回编辑区，并显示文件下载链接。

后边查看源码发现问题的所在

原来代码：kindeditor.js中的KE.plugin['accessory']代码部分

exec: function(id) {
            KE.util.select(id);
            var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
            var type = KE.$('type', dialogDoc).value;
            if (!this.check(id)) return false;
            if (type == 1) {
                //没有调用insert操作
                KE.$('editorId', dialogDoc).value = id; 
                dialogDoc.uploadForm.submit();
                return false;
            } else {
                var url = KE.$('url', dialogDoc).value;
                var title = KE.$('imgTitle', dialogDoc).value;
                this.insert(id, url, title, ext);
            }
        }

可以看到在type==1（上传本地文件）的时候，并没有调用任何处理操作（如调用insert），仅仅是做了一个提交操作。

我对这段代码进行了修改：

exec: function(id) {
            //----
            var self = this;
            //----
            KE.util.select(id);
            var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
            var type = KE.$('type', dialogDoc).value;
            if (!this.check(id)) return false;
            if (type == 1) {
                KE.$('editorId', dialogDoc).value = id;
                
                ///------------
                var uploadIframe = KE.$('uploadIframe', dialogDoc);   //需要有个iframe
                var onloadFunc = function() {
    				KE.event.remove(uploadIframe, 'load', onloadFunc);
    				KE.util.hideLoadingPage(id);
    				var uploadDoc = KE.util.getIframeDoc(uploadIframe);
    				var data = '';
    				try {
    					data = KE.util.parseJson(uploadDoc.body.innerHTML);
    				} catch(e) {
    					alert(KE.lang.invalidJson);
    				}
    				if (typeof data === 'object' && 'error' in data) {
    					if (data.error === 0) {
    						var url = KE.format.getUrl(data.url, 'absolute');
    						self.insert(id, url, data.title , "");
    					} else {
    						alert(data.message);
    						return false;
    					}
    				}
    			};
                KE.event.add(uploadIframe, 'load', onloadFunc);
                //---------------------------
                
                dialogDoc.uploadForm.submit();
                return;
            } else {
                var url = KE.$('url', dialogDoc).value;
                var title = KE.$('imgTitle', dialogDoc).value;
                this.insert(id, url, title, ext);
            }
        }

被注释包围的区域就是我添加的代码，这样可以完成类似图片上传的功能，并能在编辑区显示上传的文件

注意：这里的返回值是Json格式

//返回正常
{
"error" : 0
"url" : ...
"title" :...
}

//返回错误
{
"error" : 1
"message" :　...
}

此处还要修改博客中提到的accessory.html文件

修改如下：

……
<body>
<!-- 加入name为uploadIframe的iframe -->
<iframe name="uploadIframe" id="uploadIframe" style="display:none;"></iframe>

<!-- target为uploadIframe -->
<form name="uploadForm" method="post" enctype="multipart/form-data" action="../../upload_file_json.php" target="uploadIframe">

……

这样修改以后就可以在上传本地文件之后，跳转回编辑区，并显示要下载的文件链接。