一、关于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: 'http://www.cnblogs.com/handler/upload_json.aspx',
fileManagerJson: 'http://www.cnblogs.com/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') ? 'http://www.cnblogs.com/handler/upload_json.aspx' : KE.g[id].imageUploadJson;
设置上传文件处理类的路径。
2、在控件初始化时，设定imageUploadJson: 'http://www.cnblogs.com/handler/upload_json.aspx'，注：'http://www.cnblogs.com/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: 'http://www.cnblogs.com/handler/file_manager_json.aspx'即可。
点击浏览，可以看到上传的图片缩略图，如下所示：
五、KindEditor自定义插件
KindEditor提供了比较灵活的控件添加机制，用户可以自行的设计相关插件，来丰富文本编辑器的功能。
具体添加方法，参看http://www.kindsoft.net/doc.php?cmd=plugin。
