| 主题: kindeditor 增加附件上传功能（asp.net 版） |
| 作者: ๑ 知菋、๑, 发布日期: 2011-01-22 09:25:28, 浏览数: 12069 |
|
根据http://www.kindsoft.net/view.php?bbsid=7&postid=759&pagenum=1修改的 文章后面那几张图片可以到我的博客中下载：http://dxz506.blog.163.com/blog/static/103254696201102153911318/ 刚试用了下上面的【插入代码】功能，出来的字体怎么间距很宽？ kindeditor.js： 1.在KE.lang中加入 accessory : '插入附件', 2.在KE.lang中加入对附件格式的限制说明 invalidAccessory: "请上传有效的文件，只允许doc,xls,pdf,docx,xlsx,pptx,txt,ppt,rar,zip格式；\n或输入有效的URL地址。", //docx,xlsx,pptx为office 2007以上的格式 3.在KE.setting的 Items 中加入'accessory', 4.增加附件的plugin,我是直接加到 kindeditor.js 文件中的，我是根据这篇文章的方法进行修改，因为原来的是php版本的，而且js也有错误 （要php版本的自己看这里，但估计js有错，引用远程附近的时候http://www.kindsoft.net/view.php?bbsid=7&postid=759&pagenum=1） //[上传附件] yx 2011.01.17 KE.plugin['accessory'] = { click: function(id) { KE.util.selection(id); //var dialog = new KE.dialog({ this.dialog = new KE.dialog({ id: id, cmd: 'accessory', file: 'accessory.html', width: 310, height: 90, title: KE.lang['accessory'], yesButton: KE.lang['yes'], noButton: KE.lang['no'] }); this.dialog.show(); }, check: function(id) { var dialogDoc = KE.util.getIframeDoc(this.dialog.iframe); //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|docx|xlsx|pptx|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(this.dialog.iframe); //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; if (url != '') { //为了避免转义反斜杠出问题，这里将对其进行转换 var re = /(\\+)/g; var filename = url.replace(re, "#"); //对路径字符串进行剪切截取 var one = filename.split("#"); //获取数组中最后一个，即文件名 var two = one[one.length - 1]; //再对文件名进行截取，以取得后缀名 var three = two.split("."); //获取截取的最后一个字符串，即为后缀名 ext = three[three.length - 1]; //插入远程url附件 this.insert(id, url, title, ext); } } }, insert: function(id, url, title, ext) { var img switch (ext) { case "doc": img = "../../Plugins/kindeditor/skins/default/word.png"; break; case "xls": img = "../../Plugins/kindeditor/skins/default/execl.png"; break; case "ppt": img = "../../Plugins/kindeditor/skins/default/ppt.png"; break; case "docx": //office 2007以上的文档格式 img = "../../Plugins/kindeditor/skins/default/word.png"; break; case "xlsx": img = "../../Plugins/kindeditor/skins/default/execl.png"; break; case "pptx": img = "../../Plugins/kindeditor/skins/default/ppt.png"; break; case "rar": img = "../../Plugins/kindeditor/skins/default/rar_zip.png"; break; case "zip": img = "../../Plugins/kindeditor/skins/default/rar_zip.png"; break; case "txt": img = "../../Plugins/kindeditor/skins/default/txt.png"; break; case "pdf": img = "../../Plugins/kindeditor/skins/default/pdf.png"; break; default: img = "../../Plugins/kindeditor/skins/default/file.png"; } var html = '<img style="width:30px; height:30px; vertical-align:middle; border:0;" src="' + img + '" > '; html += '<a href="' + url + '" >'; if (title) html += title; html += '</a>'; KE.util.insertHtml(id, html); this.dialog.hide(); KE.util.focus(id); } }; -------------------------------------------------------------------------------------------------------------- accessory_upload_json.ashx 文件，放到kindeditor目录下的asp.net文件夹中 <%@ webhandler Language="C#" class="accessory" %> /** * KindEditor ASP.NET * 功能：[插入附件] yx 2011.01.18 * 本ASP.NET程序是演示程序，建议不要直接在实际项目中使用。 * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。 * */ using System; using System.Collections; using System.Web; using System.IO; using System.Globalization; using LitJson; public class accessory : IHttpHandler { //文件保存目录路径 private String savePath = "../../../Upload/File/"; //这里给自己想要保存文件的相对路径 //定义允许上传的文件扩展名，docx,xlsx,pptx为office 2007以上的格式 private String fileTypes = "doc,xls,ppt,docx,xlsx,pptx,pdf,txt,rar,zip"; //最大文件不能超过5M private int maxSize = 5242880; private HttpContext context; public void ProcessRequest(HttpContext context) { this.context = context; HttpPostedFile imgFile = context.Request.Files["imgFile"]; if (imgFile == null) showError("请选择文件。"); String myYearDir = DateTime.Now.ToString("yyyy"); //保存文件的年份文件夹名称 String myMonthDir = DateTime.Now.ToString("MM"); //保存文件的月份文件夹名称 String dirPath = savePath + myYearDir+ "/" ; if (!Directory.Exists(context.Server.MapPath(dirPath))) Directory.CreateDirectory(context.Server.MapPath(dirPath));//如果不存在该文件夹，则创建年份文件夹 dirPath = dirPath + myMonthDir + "/"; if (!Directory.Exists(context.Server.MapPath(dirPath))) Directory.CreateDirectory(context.Server.MapPath(dirPath));//如果不存在该文件夹，则创建月份文件夹 String fileName = imgFile.FileName; String fileExt = Path.GetExtension(fileName).ToLower(); ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(',')); if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) showError("上传文件大小不能超过5M。"); if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1) showError("上传文件扩展名是不允许的扩展名。"); String newFileName = DateTime.Now.ToString("yyyyMMdd_HHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; String filePath = context.Server.MapPath(dirPath) + newFileName; try { imgFile.SaveAs(filePath); } catch (Exception ex) { showError("保存附件出错。"); } String fileUrl = dirPath + newFileName; //Hashtable hash = new Hashtable(); //hash["error"] = 0; //上传成功 //hash["url"] = fileUrl; //context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); //context.Response.Write(JsonMapper.ToJson(hash)); //context.Response.End(); ////////////////////////////////////////////////////////////////////////////////////////////////// // 插入附件到kindeditor中 string id = context.Request["id"].Trim(); //kindeditor控件的id string url = fileUrl.Trim(); //保存文件的相对路径 string title = Path.GetFileName(fileName).Trim(); //文件名称（原名陈） string ext = fileExt.Substring(1).ToLower().Trim(); //文件后缀名 System.Text.StringBuilder sb = new System.Text.StringBuilder(); sb.Append("<html>"); sb.Append("<head>"); sb.Append("<title>Insert Accessory</title>"); sb.Append("<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"); sb.Append("</head>"); sb.Append("<body>"); sb.Append("<script type=\"text/javascript\">parent.KE.plugin[\"accessory\"].insert(\"" + id + "\", \"" + url + "\",\"" + title + "\",\"" + ext + "\");</script>"); sb.Append("</body>"); sb.Append("</html>"); context.Response.Write(sb.ToString()); context.Response.End(); } private void showError(string message) { Hashtable hash = new Hashtable(); hash["error"] = 1; //上传错误 hash["message"] = message; context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); context.Response.Write(JsonMapper.ToJson(hash)); context.Response.End(); } public bool IsReusable { get { return true; } } } ------------------------------------------------------------------------------------------------------------------------------- accessory.html 文件，放到放到kindeditor目录下的plugins文件夹中 <!doctype html> <html> <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) { var url = document.getElementById('url'); var imgFile = document.getElementById('imgFile'); var trRemark = document.getElementById('trRemark'); if (obj.value == 1) { //本地上传附件 url.style.display = 'none'; imgFile.style.display = 'block'; trRemark.style.display = 'none'; } else { url.style.display = 'block'; imgFile.style.display = 'none'; trRemark.style.display = 'block'; } } </script> </head> <body> <form name="uploadForm" method="post" enctype="multipart/form-data" action="../asp.net/accessory_upload_json.ashx"> <input type="hidden" id="editorId" name="id" value="" /> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="left1"> <select id="type" name="type" onchange="changeType(this);"> <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 id="trRemark" style="display:none;"> <td class="left1" align="right">说明：</td> <td class="right1"><input type="text" id="imgTitle" name="imgTitle" value="附件" maxlength="100" style="width:220px;" /></td> </tr> </table> </form> </body> </html> ------------------------------------------------------------------------------------------------------------------------------------------------------------------ 下面就是用到的图片和css样式 .ke-icon-accessory { background-position: 0px -912px; width: 16px; height: 16px; } 找这几张图片还费了我不少时间，png格式的，在ie6下背景布透明，自己转成gif的吧,注意图片名称哈，放在skins/default文件夹下 txt.png rar_zip.png ppt.png pdf.png file.png execl.png word.png ------------------------------------------------------------------------------------------------------------------------------------------------------------------- 这里是要用kindeditor控件的页面， <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Articles_Add.aspx.cs" Inherits="Admin_Article_Articles_Add" %> <!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 runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <title>阿尔卑斯网-图文管理-文章管理-添加新文章</title> <!-- 后台样式文件 --> <link rel="Stylesheet" type="text/css" href="../css/sys_cnalps.css" /> <!-- kindeditor 插件 --> <script type="text/javascript" charset="utf-8" src="../../Plugins/kindeditor/kindeditor.js"></script> <script type="text/javascript"> KE.show({ id: 'txtContent', //skinType:'tinymce', urlType: 'relative', //改变站内本地URL，空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径 newlineTag: 'br', //设置回车换行标签，可设置p、br imageUploadJson: '../../asp.net/upload_json.ashx', fileManagerJson: '../../asp.net/file_manager_json.ashx', allowFileManager: true, afterCreate: function(id) { KE.event.ctrl(document, 13, function() { KE.util.setData(id); document.forms['form1'].submit(); }); KE.event.ctrl(KE.g[id].iframeDoc, 13, function() { KE.util.setData(id); document.forms['form1'].submit(); }); } }); </script> </head> <body style="background:#fff;"> <form id="form1" runat="server"> <!--内容 开始--> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>标题：</td> <td colspan="3"> <input id="txtTitle" type="text" /> </td> </tr> <tr> <td>标签：</td> <td> <input id="Text1" type="text" /> </td> <td> </td> <td> </td> </tr> <tr> <td>内容：</td> <td colspan="3"> <textarea id="txtContent" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;" runat="server"></textarea> </td> </tr> </table> <!--内容 结束--> </form> </body> </html> --------------------------------------------------------------------------------------------------- 应该完成了吧，不知道kindeditor是没有这个功能还是给简化了？希望开发者看到了能把这个功能集成进去 |
