增加附件上传功能
1.在KE.lang中加入accessory : '插入附件',
2.加入对附件格式的限制说明invalidAccessory : "请输入有效的URL地址。\n只允许doc,xls,pdf,txt,ppt,rar,zip格式。",
3.在defaultItems中加入'accessory',
4.增加附件的plugin
KE.plugin['accessory'] = {
click : function(id) {
KE.util.selection(id);
var dialog = new KE.dialog({
id : id,
cmd : 'accessory',
width : 310,
height : 90,
title : KE.lang['accessory'],
yesButton : KE.lang['yes'],
noButton : KE.lang['no']
});
dialog.show();
},
check : function(id) {
var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
var type = KE.$('type', dialogDoc).value;
var url = '';
if (type == 1) {
url = KE.$('imgFile', dialogDoc).value;
} else {
url = KE.$('url', dialogDoc).value;
}
if (url.match(/\.(doc|xls|ppt|pdf|txt|rar|zip)$/i) == null) {
alert(KE.lang['invalidAccessory']);
window.focus();
KE.g[id].yesButton.focus();
return false;
}
return true;
},
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) {
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);
}
},
insert : function(id, url, title, ext) {
var img
switch (ext)
{
case "doc":
img="./../images/ico/doc.gif";
break;
case "xls":
img="./../images/ico/execl.gif";
break;
case "ppt":
img="./../images/ico/ppt.gif";
break;
case "rar":
img="./../images/ico/rar.gif";
break;
case "zip":
img="./../images/ico/zip.gif";
break;
case "txt":
img="./../images/ico/txt.gif";
break;
case "pdf":
img="./../images/ico/pdf.gif";
break;
default:
img="./../images/ico/attach.gif";
}
var html = '<img src="' + img + '" > ';
html += '<a href="' + url + '" >';
if (title) html += title;
html += '</a>';
alert(html)
KE.util.insertHtml(id, html);
KE.layout.hide(id);
KE.util.focus(id);
}
};
5.在plugins文件夹中增加上传附件的文件，文件内容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Accessory</title>
<style type="text/css" rel="stylesheet">
body {
font-size:12px;
margin: 0px;
background-color:#F0F0EE;
overflow: hidden;
}
td.left1 {
font-size:12px;
width: 50px;
padding: 2px;
}
td.right1 {
font-size:12px;
padding: 2px;
}
td.left2 {
font-size:12px;
width: 35px;
padding: 2px;
}
td.right2 {
font-size:12px;
padding: 2px;
width: 50px;
}
</style>
<script type="text/javascript">
function changeType(obj) {
if (obj.value == 1) {
document.getElementById('url').style.display = 'none';
document.getElementById('imgFile').style.display = 'block';
} else {
document.getElementById('url').style.display = 'block';
document.getElementById('imgFile').style.display = 'none';
}
}
</script>
< /head>
< body>
<form name="uploadForm" method="post" enctype="multipart/form-data" action="../php/uploadaccessory.php">
<input type="hidden" id="editorId" name="id" value="" />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="left1">
<select id="type" name="type" /> <option value="1" selected="selected">本地</option>
<option value="2">远程</option>
</select>
</td>
<td class="right1">
<input type="file" id="imgFile" name="imgFile" style="width:220px;" />
<input type="text" id="url" name="url" value="http://" maxlength="255" style="width:220px;display:none;" />
</td>
</tr>
<tr>
<td class="left1">说明:</td>
<td class="right1">
<input type="text" id="imgTitle" name="imgTitle" value="" maxlength="100" style="width:220px;" />
</td>
</tr>
</table>
</form>
< /body>
< /html>
7.修改skins目录里的default.gif，增加附件图标,我是加在最后面
8.修改skins目录里的default.css,加入
.ke-icon-accessory {
background-position: 0px -736px;
width: 16px;
height: 16px;
}
9.OK
增加附件功能后的编辑器
测试效果如下：