2011-02-12 14:02:20
作者：IT伯伯
所属分类：Web前端
阅读：2965
评论：7
标签：
HTML文本编辑器, KindEditor, Web
一、关于KindEditor
KindEditor是一套开源的HTML可视化编辑器，采用JavaScript编写，可以使用在Java、.NET、PHP、ASP程序中。
效果图如下：
KindEditor源代码默认在LGPL开源协议下发布，可用于商业用途。
具体参见官方网站：http://www.kindsoft.net/about.php
二、KindEditor源码结构
KindEditor最新版本是3.5.1，下载的压缩包大小为612K，解压缩后的文件大小为1.45M，主要包括以下文件：
源码包文件夹结构如下：
其中asp、asp.net、jsp、php四个文件夹为KindEditor在个程序中使用的代码说明；examples文件夹为KindEditor使用示例；attached文件夹为上传附件的文件夹；plugins为KindEditor的插件文件夹；skins为KindEditor的皮肤文件夹；KindEditor-min.js为压缩版本；KindEditor.js为程序主文件。
在程序中使用我们只需要一下文件即可。
三、KindEditor使用
注：示例采用KindEditor与ASP.NET程序。
1、将KindEditor文件夹文件添加到项目中。
2、在ASP.NET页面中添加一个textarea控件，命名为txtContent，在页面头部假如以下代码：
代码<script type="text/javascript" charset="utf-8" src="kindeditor/kindeditor.js">/script> <script type="text/javascript"> KE.show({ id : 'txtContent', imageUploadJson: '../handler/upload_json.aspx', fileManagerJson: '../handler/file_manager_json.aspx', allowFileManager: true, allowUpload: true, afterCreate : function(id) { KE.event.ctrl(document, 13, function() { KE.util.setData(id); }); KE.event.ctrl(KE.g[id].iframeDoc, 13, function() { KE.util.setData(id); }); } }); </script>
主要是对文件的引用和控件的初始化，设定id为textarea控件的id即可。
完成之后，打开浏览界面，效果如下：
四、KindEditor上传图片插件
I）上传图片
注：在3.5.1的版本中有采用upload_json.ashx类文件进行图片上传处理，本示例为了兼容VS 2003.NET，则采用upload_json.aspx类文件处理，aspx前台页面只保留第一行文件头声明，后台代码如下：其中uplaod为上传图片的文件夹。
上传图片处理类public partial class upload_json : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //文件保存目录路径 string SavePath = "/upload/"; //文件保存目录URL string SaveUrl = SavePath; //上传图片类型 string[] ExtStr = new string[4]; ExtStr[0] = ".gif"; ExtStr[1] = ".jpg"; ExtStr[2] = ".png"; ExtStr[3] = ".bmp"; //图片的最大大小 int MaxSize = 500000;//500kb //错误提示 string[] MsgStr = new string[3]; MsgStr[0] = "上传文件大小超过限制."; MsgStr[1] = "上传文件扩展名是不允许的扩展名."; MsgStr[2] = "上传文件失败n请重试."; string imgWidth = Request.Form["imgWidth"]; string imgHeight = Request.Form["imgHeight"]; string imgBorder = Request.Form["imgBorder"]; string imgTitle = Request.Form["imgTitle"]; string imgAlign = Request.Form["imgAlign"]; string imgHspace = Request.Form["imgHspace"]; string imgVspace = Request.Form["imgVspace"]; HttpPostedFile imgFile = HttpContext.Current.Request.Files["imgFile"]; //获得文件名 string FileName = System.IO.Path.GetFileName(imgFile.FileName); if (FileName != "") { if (imgFile.ContentLength > MaxSize) { Alert(MsgStr[0]); } else { string fileExtension = System.IO.Path.GetExtension(FileName).ToLower(); if (CheckExt(ExtStr, fileExtension)) { //重新为文件命名,时间毫秒部分+扩展名 string imgReName = "" + DateTime.Now.Ticks + fileExtension; ////文件夹名 //string imgFolderName = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo); try { if (!System.IO.Directory.Exists(@Server.MapPath("" + SavePath))) { //生成文件完整目录 System.IO.Directory.CreateDirectory(@Server.MapPath("" + SavePath)); } imgFile.SaveAs(@Server.MapPath("" + SavePath) + imgReName); } catch { Alert(MsgStr[2]); } string imgUrl = SaveUrl + imgReName; ReturnImg(imgUrl, imgWidth, imgHeight, imgBorder, imgTitle, imgAlign, imgHspace, imgVspace); } else { Alert(MsgStr[1]); } } } } /// <summary> /// 提示关闭层 /// </summary> /// <param name="MsgStr"></param> private void Alert(string MsgStr) { Response.Write("<html>"); Response.Write("<head>"); Response.Write("<title>error</title>"); Response.Write("<meta http-equiv="content-type" content="text/html; charset=utf-8">"); Response.Write("</head>"); Response.Write("<body>"); Response.Write("<script type="text/javascript">alert("" + MsgStr + "");parent.KindDisableMenu();parent.KindReloadIframe();</script>"); Response.Write("</body>"); Response.Write("</html>"); } /// <summary> /// 检测文件类型 /// </summary> /// <param name="ExtStr"></param> /// <param name="fileExt"></param> /// <returns></returns> private bool CheckExt(string[] ExtStr, string fileExt) { for (int i = 0; i < ExtStr.Length; i++) { if (ExtStr[i] != fileExt) { return true; } } return false; } /// <summary> /// 返回图片 /// </summary> /// <param name="FileUrl"></param> /// <param name="FileWidth"></param> /// <param name="FileHeight"></param> /// <param name="FileBorder"></param> /// <param name="FileTitle"></param> /// <param name="FileAlign"></param> /// <param name="FileHspace"></param> /// <param name="FileVspace"></param> private void ReturnImg(string FileUrl, string FileWidth, string FileHeight, string FileBorder, string FileTitle, string FileAlign, string FileHspace, string FileVspace) { StringBuilder sb = new StringBuilder(); sb.Append("<html>"); sb.Append("<head>"); sb.Append("<title>Insert Image</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["image"].insert("" + Request["id"] + "", "" + FileUrl + "","" + FileTitle + "","" + FileWidth + "","" + FileHeight + "","" + FileBorder + "");</script>"); sb.Append("</body>"); sb.Append("</html>"); Response.Write(sb.ToString()); } }
- 完成之后，进行如下配置，即可上传图片成功，否则，则弹出服务器连接错误的提示消息。
1、修改plugins/image/image.html文件中的
var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../handler/upload_json.aspx' : KE.g[id].imageUploadJson;
设置上传文件处理类的路径。
2、在控件初始化时，设定imageUploadJson: '../handler/upload_json.aspx'，注：'../handler/upload_json.aspx'路径是针对plugins中image.html文件的相对路径，而非程序页面文件的相对路径。
将此二处设置完成之后，即可上传图片，如图：
II）浏览图片
同I，浏览图片的操作类file_manager_json.aspx，代码如下：
图片浏览处理类public partial class file_manager_json : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.Clear(); Response.ContentType = "application/json;"; Response.Charset = "UTF-8"; string currentPath = "/upload/"; StringBuilder sb = new StringBuilder(); sb.Append("{"moveup_dir_path":"","); sb.Append(""current_dir_path":"" + currentPath + "","); sb.Append(""current_url":"" + currentPath + "","); string[] files = System.IO.Directory.GetFiles(Server.MapPath("~" + currentPath)); sb.Append(""total_count":" + files.Length + ","); sb.Append(""file_list":["); for (int i = 0; i < files.Length; i++) { FileInfo file = new FileInfo(files[i]); sb.Append("{"is_dir":false,"has_file":false,"filesize":" + file.Length + ","dir_path":"","is_photo":true,"filetype":"" + file.Extension + "","filename":"" + file.Name + "","datetime":"" + file.CreationTime + ""}"); if (i != files.Length - 1) { sb.Append(","); } } sb.Append("]}"); Response.Write(sb.ToString()); } }
同I，在控件初始化时，进行fileManagerJson: '../handler/file_manager_json.aspx'即可。
点击浏览，可以看到上传的图片缩略图，如下所示：
五、KindEditor自定义插件
KindEditor提供了比较灵活的控件添加机制，用户可以自行的设计相关插件，来丰富文本编辑器的功能。
具体添加方法，参看http://www.kindsoft.net/doc.php?cmd=plugin。
»
郑重声明：本文由
IT伯伯发布，所有内容仅代表个人观点。版权归
IT伯伯和
IT伯伯共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。
留言是种美德，写点什么…
嘿嘿，很多资源蛮不错的，可是我这个行外人好像有点看不懂 :
不过蛮喜欢那个品味生活栏目的，每天都会常来！加油，支持你们！
嘿嘿，有你们的支持，我们真的很幸福呢
诸葛亮临死前料定他死后魏延必反，暗嘱马岱杀掉魏延。蜀将中人才济济，马岱武功并不高强，为何诸葛亮偏要找马岱担此重任呢？因为，马岱字丁琳，马丁琳专治魏延。。。.
留言是种美德，写点什么…
o(∩_∩)o 哈哈，那要多来哟