KindEditor及CkEditor配置说明-优快云博客

本文详细介绍了KindEditor和CkEditor两种在线编辑器的配置步骤、功能特点以及如何集成图片上传功能。包括配置方法、代码示例、注意事项等，帮助开发者在网站、CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用中高效使用这些编辑器。

http://www.cnblogs.com/fishtreeyu/archive/2011/02/11/1951516.html

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

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

<script type="text/javascript">  

KE.show({  

id: txtContent,  

imageUploadJson: '/handler/upload_json.ashx',  

items : [  

'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',  

'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',  

'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',  

'superscript', '|', 'selectall', '-',  

'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',  

'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',  

'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink' 

]  

});  

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

 
using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Web;  

using System.Collections;  

using System.IO;  

using System.Globalization;  

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



namespace Yongbin.Shop.Web.handler  

     11{ 

/// <summary>  

/// upload_json 的摘要说明  

/// </summary>  

public class upload_json : IHttpHandler  

{  

//文件保存目录路径  

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

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

private String saveUrl = "/upload/" + DateTime.Now.ToString("yyyyMMdd") + "/";  

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

private String fileTypes = "gif,jpg,jpeg,png,bmp";  

//最大文件大小  

private int maxSize = 1000000;  



private HttpContext context;  



public void ProcessRequest(HttpContext context)  

{  

this.context = context;  



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

if (imgFile == null)  

{  

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

}  



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

if (!Directory.Exists(dirPath))  

{  

Directory.CreateDirectory(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("上传文件大小超过限制。");  

}  



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

{  

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

}  



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

String filePath = dirPath + newFileName;  



imgFile.SaveAs(filePath);  



String fileUrl = saveUrl + 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();  

}  



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 false;  

}  

}  

}  

     91}