ASP.NET 配置KindEditor文本编辑器

1.什么是KindEditor

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

2.前期准备

到官网下载最新版的KindEditor 4.1.10，解压文件后可得

 

文件结构：

asp：与asp结合的示例代码

asp.net：与asp.net结合的示例代码

attached：上传文件的根目录，可在相关的代码中修改

examples：功能演示的示例代码

jsp：与jsp结合的示例代码

lang：语言包

php：与php结合的示例代码

plugins：控件的功能代码的实现

kindeditor.js：配置文件

kindeditor-min.js：集成文件

由于使用的是ASP.NET，所以将不需要的文件夹删掉。其中在asp.net中demo.aspx是参考代码，也可以删掉。

3.配置KindEditor

（1）新建ASP.NET空项目，添加WebForm.aspx

　　3.2：将attached文件夹直接放在项目根目录下

　　3.1：将精简后的kindeditor文件夹(删除asp/examples/jsp/php文件夹)放到项目根目录下

　　3.3：新建libs文件夹，将kindeditor/asp.net/bin/LitJSON.dll文件复制到libs文件夹中，并引用(在别的电脑上，这个引用路径可能不正确，直接找到项目中libs中的LitJSON.dll再次引用即可)。

（2）新建WebForm1.aspx文件，引入相关文件

 1 <link href="kindeditor/plugins/code/prettify.css" rel="stylesheet" type="text/css" />
 2     <script src="kindeditor/lang/zh_CN.js" type="text/javascript"></script>
 3     <script src="kindeditor/kindeditor.js" type="text/javascript"></script>
 4     <script src="kindeditor/plugins/code/prettify.js" type="text/javascript"></script>  
 5     <script type="text/javascript">
 6         KindEditor.ready(function (K) {
 7             var editor = K.create('#content', {
 8                 //上传管理
 9                 uploadJson: 'kindeditor/asp.net/upload_json.ashx',
10                 //文件管理
11                 fileManagerJson: 'kindeditor/asp.net/file_manager_json.ashx',
12                 allowFileManager: true,
13                 //设置编辑器创建后执行的回调函数
14                 afterCreate: function () {
15                     var self = this;
16                     K.ctrl(document, 13, function () {
17                         self.sync();
18                         K('form[name=example]')[0].submit();
19                     });
20                     K.ctrl(self.edit.doc, 13, function () {
21                         self.sync();
22                         K('form[name=example]')[0].submit();
23                     });
24                 },
25                 //上传文件后执行的回调函数,获取上传图片的路径
26                 afterUpload : function(url) {
27                         alert(url);
28                 },
29                 //编辑器高度
30                 width: '700px',
31                 //编辑器宽度
32                 height: '450px;',
33                 //配置编辑器的工具栏
34                 items: [
35                 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
36                 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
37                 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
38                 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
39                 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
40                 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
41                 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
42                 'anchor', 'link', 'unlink', '|', 'about'
43                 ]
44             });
45             prettyPrint();
46         });
47     </script>
ASP.NET 页面引用css和js

（3）在页面中添加一个textbox控件，将id命名为content，把属性"TextMode"属性改为Multiline

<body>
    <form id="form1" runat="server">
    <div id="main">
        <asp:TextBox id="content" name="content" TextMode="MultiLine" runat="server"></asp:TextBox>
    </div>
    </form>
</body>

 （4）在浏览器查看

4.附件上传原理

在asp.net文件夹下有两个重要的file_manager_json.ashx，upload_json.ashx，一个负责文件管理，一个负责上传管理。你可以根据自己需求进行相关修改。

原理：通过实现接口IHttpHandler来接管HTTP请求。

file_manager_json.ashx

  1 <%@ webhandler Language="C#" class="FileManager" %>
  2 
  3 /**
  4  * KindEditor ASP.NET
  5  *
  6  * 本ASP.NET程序是演示程序，建议不要直接在实际项目中使用。
  7  * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
  8  *
  9  */
 10 
 11 using System;
 12 using System.Collections;
 13 using System.Web;
 14 using System.IO;
 15 using System.Text.RegularExpressions;
 16 using LitJson;
 17 using System.Collections.Generic;
 18 
 19 public class FileManager : IHttpHandler
 20 {
 21     public void ProcessRequest(HttpContext context)
 22     {
 23         String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);
 24 
 25         //根目录路径，相对路径
 26         String rootPath = "../attached/";
 27         //根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
 28         String rootUrl = aspxUrl + "../attached/";
 29         //图片扩展名
 30         String fileTypes = "gif,jpg,jpeg,png,bmp";
 31 
 32         String currentPath = "";
 33         String currentUrl = "";
 34         String currentDirPath = "";
 35         String moveupDirPath = "";
 36 
 37         String dirPath = context.Server.MapPath(rootPath);
 38         String dirName = context.Request.QueryString["dir"];
 39         if (!String.IsNullOrEmpty(dirName)) {
 40             if (Array.IndexOf("image,flash,media,file".Split(','), dirName) == -1) {
 41                 context.Response.Write("Invalid Directory name.");
 42                 context.Response.End();
 43             }
 44             dirPath += dirName + "/";
 45             rootUrl += dirName + "/";
 46             if (!Directory.Exists(dirPath)) {
 47                 Directory.CreateDirectory(dirPath);
 48             }
 49         }
 50 
 51         //根据path参数，设置各路径和URL
 52         String path = context.Request.QueryString["path"];
 53         path = String.IsNullOrEmpty(path) ? "" : path;
 54         if (path == "")
 55         {
 56             currentPath = dirPath;
 57             currentUrl = rootUrl;
 58             currentDirPath = "";
 59             moveupDirPath = "";
 60         }
 61         else
 62         {
 63             currentPath = dirPath + path;
 64             currentUrl = rootUrl + path;
 65             currentDirPath = path;
 66             moveupDirPath = Regex.Replace(currentDirPath, @"(.*?)[^\/]+\/$", "$1");
 67         }
 68 
 69         //排序形式，name or size or type
 70         String order = context.Request.QueryString["order"];
 71         order = String.IsNullOrEmpty(order) ? "" : order.ToLower();
 72 
 73         //不允许使用..移动到上一级目录
 74         if (Regex.IsMatch(path, @"\.\."))
 75         {
 76             context.Response.Write("Access is not allowed.");
 77             context.Response.End();
 78         }
 79         //最后一个字符不是/
 80         if (path != "" && !path.EndsWith("/"))
 81         {
 82             context.Response.Write("Parameter is not valid.");
 83             context.Response.End();
 84         }
 85         //目录不存在或不是目录
 86         if (!Directory.Exists(currentPath))
 87         {
 88             context.Response.Write("Directory does not exist.");
 89             context.Response.End();
 90         }
 91 
 92         //遍历目录取得文件信息
 93         string[] dirList = Directory.GetDirectories(currentPath);
 94         string[] fileList = Directory.GetFiles(currentPath);
 95 
 96         switch (order)
 97         {
 98             case "size":
 99                 Array.Sort(dirList, new NameSorter());
100                 Array.Sort(fileList, new SizeSorter());
101                 break;
102             case "type":
103                 Array.Sort(dirList, new NameSorter());
104                 Array.Sort(fileList, new TypeSorter());
105                 break;
106             case "name":
107             default:
108                 Array.Sort(dirList, new NameSorter());
109                 Array.Sort(fileList, new NameSorter());
110                 break;
111         }
112 
113         Hashtable result = new Hashtable();
114         result["moveup_dir_path"] = moveupDirPath;
115         result["current_dir_path"] = currentDirPath;
116         result["current_url"] = currentUrl;
117         result["total_count"] = dirList.Length + fileList.Length;
118         List<Hashtable> dirFileList = new List<Hashtable>();
119         result["file_list"] = dirFileList;
120         for (int i = 0; i < dirList.Length; i++)
121         {
122             DirectoryInfo dir = new DirectoryInfo(dirList[i]);
123             Hashtable hash = new Hashtable();
124             hash["is_dir"] = true;
125             hash["has_file"] = (dir.GetFileSystemInfos().Length > 0);
126             hash["filesize"] = 0;
127             hash["is_photo"] = false;
128             hash["filetype"] = "";
129             hash["filename"] = dir.Name;
130             hash["datetime"] = dir.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
131             dirFileList.Add(hash);
132         }
133         for (int i = 0; i < fileList.Length; i++)
134         {
135             FileInfo file = new FileInfo(fileList[i]);
136             Hashtable hash = new Hashtable();
137             hash["is_dir"] = false;
138             hash["has_file"] = false;
139             hash["filesize"] = file.Length;
140             hash["is_photo"] = (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) >= 0);
141             hash["filetype"] = file.Extension.Substring(1);
142             hash["filename"] = file.Name;
143             hash["datetime"] = file.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
144             dirFileList.Add(hash);
145         }
146         context.Response.AddHeader("Content-Type", "application/json; charset=UTF-8");
147         context.Response.Write(JsonMapper.ToJson(result));
148         context.Response.End();
149     }
150 
151     public class NameSorter : IComparer
152     {
153         public int Compare(object x, object y)
154         {
155             if (x == null && y == null)
156             {
157                 return 0;
158             }
159             if (x == null)
160             {
161                 return -1;
162             }
163             if (y == null)
164             {
165                 return 1;
166             }
167             FileInfo xInfo = new FileInfo(x.ToString());
168             FileInfo yInfo = new FileInfo(y.ToString());
169 
170             return xInfo.FullName.CompareTo(yInfo.FullName);
171         }
172     }
173 
174     public class SizeSorter : IComparer
175     {
176         public int Compare(object x, object y)
177         {
178             if (x == null && y == null)
179             {
180                 return 0;
181             }
182             if (x == null)
183             {
184                 return -1;
185             }
186             if (y == null)
187             {
188                 return 1;
189             }
190             FileInfo xInfo = new FileInfo(x.ToString());
191             FileInfo yInfo = new FileInfo(y.ToString());
192 
193             return xInfo.Length.CompareTo(yInfo.Length);
194         }
195     }
196 
197     public class TypeSorter : IComparer
198     {
199         public int Compare(object x, object y)
200         {
201             if (x == null && y == null)
202             {
203                 return 0;
204             }
205             if (x == null)
206             {
207                 return -1;
208             }
209             if (y == null)
210             {
211                 return 1;
212             }
213             FileInfo xInfo = new FileInfo(x.ToString());
214             FileInfo yInfo = new FileInfo(y.ToString());
215 
216             return xInfo.Extension.CompareTo(yInfo.Extension);
217         }
218     }
219 
220     public bool IsReusable
221     {
222         get
223         {
224             return true;
225         }
226     }
227 }
file_manager_json.ashx

upload_json.ashx

  1 <%@ webhandler Language="C#" class="Upload" %>
  2 
  3 /**
  4  * KindEditor ASP.NET
  5  *
  6  * 本ASP.NET程序是演示程序，建议不要直接在实际项目中使用。
  7  * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
  8  *
  9  */
 10 
 11 using System;
 12 using System.Collections;
 13 using System.Web;
 14 using System.IO;
 15 using System.Globalization;
 16 using LitJson;
 17 
 18 public class Upload : IHttpHandler
 19 {
 20     private HttpContext context;
 21 
 22     public void ProcessRequest(HttpContext context)
 23     {
 24         String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);
 25         
 26         //文件保存目录路径
 27         String savePath = "../attached/";
 28 
 29         //文件保存目录URL
 30         String saveUrl = aspxUrl + "../attached/";
 31 
 32         //定义允许上传的文件扩展名
 33         Hashtable extTable = new Hashtable();
 34         extTable.Add("image", "gif,jpg,jpeg,png,bmp");
 35         extTable.Add("flash", "swf,flv");
 36         extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
 37         extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
 38 
 39         //最大文件大小
 40         int maxSize = 1000000;
 41         this.context = context;
 42 
 43         HttpPostedFile imgFile = context.Request.Files["imgFile"];
 44         if (imgFile == null)
 45         {
 46             showError("请选择文件。");
 47         }
 48 
 49         String dirPath = context.Server.MapPath(savePath);
 50         if (!Directory.Exists(dirPath))
 51         {
 52             showError("上传目录不存在。");
 53         }
 54 
 55         String dirName = context.Request.QueryString["dir"];
 56         if (String.IsNullOrEmpty(dirName)) {
 57             dirName = "image";
 58         }
 59         if (!extTable.ContainsKey(dirName)) {
 60             showError("目录名不正确。");
 61         }
 62 
 63         String fileName = imgFile.FileName;
 64         String fileExt = Path.GetExtension(fileName).ToLower();
 65 
 66         if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
 67         {
 68             showError("上传文件大小超过限制。");
 69         }
 70 
 71         if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1)
 72         {
 73             showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。");
 74         }
 75 
 76         //创建文件夹
 77         dirPath += dirName + "/";
 78         saveUrl += dirName + "/";
 79         if (!Directory.Exists(dirPath)) {
 80             Directory.CreateDirectory(dirPath);
 81         }
 82         String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
 83         dirPath += ymd + "/";
 84         saveUrl += ymd + "/";
 85         if (!Directory.Exists(dirPath)) {
 86             Directory.CreateDirectory(dirPath);
 87         }
 88 
 89         String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
 90         String filePath = dirPath + newFileName;
 91 
 92         imgFile.SaveAs(filePath);
 93 
 94         String fileUrl = saveUrl + newFileName;
 95 
 96         Hashtable hash = new Hashtable();
 97         hash["error"] = 0;
 98         hash["url"] = fileUrl;
 99         context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
100         context.Response.Write(JsonMapper.ToJson(hash));
101         context.Response.End();
102     }
103 
104     private void showError(string message)
105     {
106         Hashtable hash = new Hashtable();
107         hash["error"] = 1;
108         hash["message"] = message;
109         context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
110         context.Response.Write(JsonMapper.ToJson(hash));
111         context.Response.End();
112     }
113 
114     public bool IsReusable
115     {
116         get
117         {
118             return true;
119         }
120     }
121 }
upload_json.ashx

5.优化改进

使用KindEditor文本编辑器时，发现不能在图片空间中修改已上传图片的信息，删除图片等，也不能进行目录操作，我觉得这是比CKEditor和CKFinder结合的文本编辑器弱势的地方。

大致想了下，有两个方法可以解决：

一是：独立写一个图片管理的模块，进行可视化操作

二是：修改plugins/filemanager/filemanager.js，并结合handler进行操作。（这个方法扩展性比较好）

如上述有什么不清晰的，可以去官网参考下！KindEditor

ASP.NET WebForm总体参考代码：

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_20160306_KindEditorSetting.WebForm1" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <link href="kindeditor/plugins/code/prettify.css" rel="stylesheet" type="text/css" />
10     <script src="kindeditor/lang/zh_CN.js" type="text/javascript"></script>
11     <script src="kindeditor/kindeditor.js" type="text/javascript"></script>
12     <script src="kindeditor/plugins/code/prettify.js" type="text/javascript"></script>
13     <script type="text/javascript">
14         KindEditor.ready(function (K) {
15             var editor = K.create('#content', {
16                 //上传管理
17                 uploadJson: 'kindeditor/asp.net/upload_json.ashx',
18                 //文件管理
19                 fileManagerJson: 'kindeditor/asp.net/file_manager_json.ashx',
20                 allowFileManager: true,
21                 //设置编辑器创建后执行的回调函数
22                 afterCreate: function () {
23                     var self = this;
24                     K.ctrl(document, 13, function () {
25                         self.sync();
26                         K('form[name=example]')[0].submit();
27                     });
28                     K.ctrl(self.edit.doc, 13, function () {
29                         self.sync();
30                         K('form[name=example]')[0].submit();
31                     });
32                 },
33                 //上传文件后执行的回调函数,获取上传图片的路径
34                 afterUpload: function (url) {
35                     alert(url);
36                 },
37                 //编辑器高度
38                 width: '700px',
39                 //编辑器宽度
40                 height: '450px;',
41                 //配置编辑器的工具栏
42                 items: [
43                 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
44                 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
45                 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
46                 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
47                 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
48                 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
49                 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
50                 'anchor', 'link', 'unlink', '|', 'about'
51                 ]
52             });
53             prettyPrint();
54         });
55     </script>
56 </head>
57 <body>
58     <form id="form1" runat="server">
59         <div id="main">
60             <asp:TextBox ID="content" name="content" TextMode="MultiLine" runat="server"></asp:TextBox>
61         </div>
62     </form>
63 </body>
64 </html>
ASP.NET WebForm1.aspx

参考源代码：链接：http://pan.baidu.com/s/1o7rXGD0  密码：kkod

posted @ 2016-03-06 21:47  DrHao  阅读(988)  评论(5)  编辑  收藏  举报