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"> ……
这样修改以后就可以在上传本地文件之后，跳转回编辑区，并显示要下载的文件链接。