一、KindEditor
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写,可以无缝的与Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。 目前最新版本 KindEditor 3.5.2,官网及下载地址 KindEditor配置步骤: 1、在项目中建立KindEditor文件夹,把下载下来后的文件解压,将其中的skins,plugins,kindeditor.js 拷到该KindEditor文件夹目录下; 2、在.aspx文件中放入TextBox控件,并设置控件ID 如:<asp:TextBox ID="txtContent" TextMode="MultiLine" runat="server"></asp:TextBox> 3、在.aspx文件中引入kindeditor.js文件及Js代码,可将TextBox控件设置成KindEditor在线编辑器,代码如下: 01 | <script src= "../kindeditor/kindeditor.js" type= "text/javascript" ></script> |
02 | <script type= "text/javascript" > |
05 | imageUploadJson: '/handler/upload_json.ashx' , |
07 | 'source' , '|' , 'fullscreen' , 'undo' , 'redo' , 'print' , 'cut' , 'copy' , 'paste' , |
08 | 'plainpaste' , 'wordpaste' , '|' , 'justifyleft' , 'justifycenter' , 'justifyright' , |
09 | 'justifyfull' , 'insertorderedlist' , 'insertunorderedlist' , 'indent' , 'outdent' , 'subscript' , |
10 | 'superscript' , '|' , 'selectall' , '-' , |
11 | 'title' , 'fontname' , 'fontsize' , '|' , 'textcolor' , 'bgcolor' , 'bold' , |
12 | 'italic' , 'underline' , 'strikethrough' , 'removeformat' , '|' , 'image' , |
13 | 'flash' , 'media' , 'advtable' , 'hr' , 'emoticons' , 'link' , 'unlink' |
其中,id为TextBox控件的ID,imageUploadJson: '/handler/upload_json.ashx'可设置图片上传(文件上传设置同理),item为设置编辑器工具栏上的每一个功能是否显示,可根据需要手动增删对应单词,如不需要“HTML代码”功能则删除“'source',”; 4、在.aspx页面的第一句话及Page指令中加上validaterequest=”false”,禁止.net自动屏蔽上传Html代码; 如:<%@ Page Language="C#" ValidateRequest="false"... 5、设置完毕,后台可直接通过TextBox的text属性来获取编辑器内容; 另:设置KindEditor的图片上传功能 1、在刚才在.aspx页面中添加的js代码中添加imageUploadJson参数, 如:imageUploadJson: '/handler/upload_json.ashx' 2、建立一般处理程序页面upload_json.ashx,该页面用于编写文件上传代码,在下载下来的源码有,在asp.net中,稍作修改,代码如下: 02 | using System.Collections.Generic; |
05 | using System.Collections; |
07 | using System.Globalization; |
10 | namespace Yongbin.Shop.Web.handler |
15 | public class upload_json : IHttpHandler |
18 | private String savePath = "/upload/" + DateTime.Now.ToString( "yyyyMMdd" ) + "/" ; |
20 | private String saveUrl = "/upload/" + DateTime.Now.ToString( "yyyyMMdd" ) + "/" ; |
22 | private String fileTypes = "gif,jpg,jpeg,png,bmp" ; |
24 | private int maxSize = 1000000; |
26 | private HttpContext context; |
28 | public void ProcessRequest(HttpContext context) |
30 | this .context = context; |
32 | HttpPostedFile imgFile = context.Request.Files[ "imgFile" ]; |
38 | String dirPath = context.Server.MapPath(savePath); |
39 | if (!Directory.Exists(dirPath)) |
41 | Directory.CreateDirectory(dirPath); |
44 | String fileName = imgFile.FileName; |
45 | String fileExt = Path.GetExtension(fileName).ToLower(); |
46 | ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split( ',' )); |
48 | if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) |
50 | showError( "上传文件大小超过限制。" ); |
53 | if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split( ',' ), fileExt.Substring(1).ToLower()) == -1) |
55 | showError( "上传文件扩展名是不允许的扩展名。" ); |
58 | String newFileName = DateTime.Now.ToString( "yyyyMMddHHmmss_ffff" , DateTimeFormatInfo.InvariantInfo) + fileExt; |
59 | String filePath = dirPath + newFileName; |
61 | imgFile.SaveAs(filePath); |
63 | String fileUrl = saveUrl + newFileName; |
65 | Hashtable hash = new Hashtable(); |
67 | hash[ "url" ] = fileUrl; |
68 | context.Response.AddHeader( "Content-Type" , "text/html; charset=UTF-8" ); |
69 | context.Response.Write(JsonMapper.ToJson(hash)); |
70 | context.Response.End(); |
73 | private void showError( string message) |
75 | Hashtable hash = new Hashtable(); |
77 | hash[ "message" ] = message; |
78 | context.Response.AddHeader( "Content-Type" , "text/html; charset=UTF-8" ); |
79 | context.Response.Write(JsonMapper.ToJson(hash)); |
80 | context.Response.End(); |
83 | public bool IsReusable |
3、配置成功
二、CkEditor 看过一个非官方非正式的关于.net在线编辑器的使用调查,CkEditor是被使用做多的,属于重量级编辑器,功能很强大;
CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。 (CKEditor 不具备上传功能,需要集成 文件管理器CKFinder 才能实现上传功能。) 我这里使用的版本是ckeditor_3.2及ckfinder_aspnet_1.4.3 未完待补充
|