KindEditor及CkEditor配置说明

一、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在线编辑器，代码如下：

view sourceprint?

01<script src="../kindeditor/kindeditor.js"type="text/javascript"></script>

02<script type="text/javascript">

03    KE.show({

04        id: txtContent,

05        imageUploadJson:'/handler/upload_json.ashx',

06        items : [

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'

14         ]

15    });

16</script>

其中，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中，稍作修改，代码如下：

view sourceprint?

01usingSystem;

02usingSystem.Collections.Generic;

03usingSystem.Linq;

04usingSystem.Web;

05usingSystem.Collections;

06usingSystem.IO;

07usingSystem.Globalization;

08usingLitJson; // 需先手动添加LitJson.dll的引用，在asp.net/bin中

09  

10namespaceYongbin.Shop.Web.handler

11{

12    /// <summary>

13    /// upload_json 的摘要说明

14    /// </summary>

15    publicclassupload_json : IHttpHandler

16    {

17        //文件保存目录路径

18        privateString savePath = "/upload/"+ DateTime.Now.ToString("yyyyMMdd") +"/"; // 修改上传目录

19        //文件保存目录URL(显示在kindeditor编辑器中的地址)

20        privateString saveUrl = "/upload/"+ DateTime.Now.ToString("yyyyMMdd") +"/";

21        //定义允许上传的文件扩展名

22        privateString fileTypes = "gif,jpg,jpeg,png,bmp";

23        //最大文件大小

24        privateintmaxSize = 1000000;

25  

26        privateHttpContext context;

27  

28        publicvoidProcessRequest(HttpContext context)

29        {

30            this.context = context;

31  

32            HttpPostedFile imgFile = context.Request.Files["imgFile"];

33            if(imgFile == null)

34            {

35                showError("请选择文件。");

36            }

37  

38            String dirPath = context.Server.MapPath(savePath);

39            if(!Directory.Exists(dirPath))

40            {

41                Directory.CreateDirectory(dirPath); // 复制过来的代码改了这里，自动创建目录

42            }

43  

44            String fileName = imgFile.FileName;

45            String fileExt = Path.GetExtension(fileName).ToLower();

46            ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));

47  

48            if(imgFile.InputStream == null|| imgFile.InputStream.Length > maxSize)

49            {

50                showError("上传文件大小超过限制。");

51            }

52  

53            if(String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)

54            {

55                showError("上传文件扩展名是不允许的扩展名。");

56            }

57  

58            String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;

59            String filePath = dirPath + newFileName;

60  

61            imgFile.SaveAs(filePath);

62  

63            String fileUrl = saveUrl + newFileName;

64  

65            Hashtable hash =newHashtable();

66            hash["error"] = 0;

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();

71        }

72  

73        privatevoidshowError(stringmessage)

74        {

75            Hashtable hash =newHashtable();

76            hash["error"] = 1;

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();

81        }

82  

83        publicboolIsReusable

84        {

85            get

86            {

87                returnfalse;

88            }

89        }

90    }

91}

3、配置成功


二、CkEditor
看过一个非官方非正式的关于.net在线编辑器的使用调查，CkEditor是被使用做多的，属于重量级编辑器，功能很强大；

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

（CKEditor 不具备上传功能，需要集成 文件管理器CKFinder 才能实现上传功能。）

我这里使用的版本是ckeditor_3.2及ckfinder_aspnet_1.4.3

未完待补充