首页 > 代码库 > ASP.NET网站使用Kindeditor富文本编辑器配置步骤

ASP.NET网站使用Kindeditor富文本编辑器配置步骤

1. 下载编辑器 
下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 

2. 部署编辑器 
解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下 
 
3、在网页中加入(ValidateRequest="false") 

1 <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeBehind="XXX.cs" Inherits="XXX" %> 

4、引入脚本文件(XXX部分需要修改)

 1 <!--富文本编辑器配置↓ --> 
 2 <link type="text/css" rel="stylesheet" href=http://www.mamicode.com/"../editor/themes/default/default.css" /> 
 3 <link rel="stylesheet" href=http://www.mamicode.com/"../editor/plugins/code/prettify.css" /> 
 4 <script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"../editor/kindeditor-min.js"></script> 
 5 <script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"../editor/lang/zh_CN.js"></script> 
 6 <script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"../editor/plugins/code/prettify.js"></script> 
 7 <script type="text/javascript"> 
 8 KindEditor.ready(function (K) { 
 9 var editor1 = K.create(#XXX, { 
10 items: [ 
11 fontname, fontsize, |, forecolor, hilitecolor, bold, italic, underline, 
12 removeformat, strikethrough, lineheight, |, justifyleft, justifycenter, justifyright, insertorderedlist, 
13 insertunorderedlist, |, emoticons, link, insertfile, media, |, image, multiimage, map, baidumap, |, preview, fullscreen, 
14 ], 
15 cssPath: ../editor/plugins/code/prettify.css, 
16 uploadJson: ../editor/asp.net/upload_json.ashx, 
17 fileManagerJson: ../editor/asp.net/file_manager_json.ashx, 
18 allowFileManager: true, 
19 pasteType: 1, 
20 afterCreate: function () { 
21 var self = this; 
22 K.ctrl(document, 13, function () { 
23 self.sync(); 
24 K(form[name=XXX])[0].submit(); 
25 }); 
26 K.ctrl(self.edit.doc, 13, function () { 
27 self.sync(); 
28 K(form[name=XXX])[0].submit(); 
29 }); 
30 } 
31 }); 
32 prettyPrint(); 
33 }); 
34 </script> 
35 <!--富文本编辑器配置↑--> 

5、使用编辑器(XXX部分需要修改) 

1 <!--富文本编辑器--> 
2 <textarea id="XXX" name="XXX" runat="server" cols="100" rows="8" style="width:1000px;height:500px;visibility:hidden;"></textarea> 

6、根据自己的需要修改配置(文件路径:web\editor\asp.net\file_manager_json.ashx)

1 //根目录路径,相对路径 
2 String rootPath = "../../"; 
3 //根目录URL,可以指定绝对路径 
4 String rootUrl = aspxUrl + "../attached/"; 
5 //图片扩展名 
6 String fileTypes = "gif,jpg,jpeg,png,bmp"; 

7、后台获取编辑器内容(XXX部分需要修改) 

 1 Request.Form["XXX"]  

由于服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”),所以写了个工具类

 1 public class HtmlUtil 
 2  { 
 3         /// <summary> 
 4         /// 替换HTML特殊字符 
 5         /// </summary> 
 6         /// <param name="content"></param> 
 7         /// <returns></returns> 
 8         public static String escapeHtml(String content) 
 9         { 
10            return content.Replace("&", "&").Replace("<", "<").Replace(">", ">").Replace("\"", """); 
11         } 
12         /// <summary> 
13         /// 还原HTML特殊字符 
14         /// </summary> 
15         /// <param name="content"></param> 
16         /// <returns></returns> 
17         public static String unescapeHtml(String content) 
18         { 
19             return content.Replace("&", "&").Replace("<", "<").Replace(">", ">").Replace(""", "\""); 
20         } 
21  } 

往数据库插入时,进行替换特殊字符(XXX部分需要修改) 

 1 HtmlUtil.escapeHtml(Request.Form["XXX"])  

从数据库读取数据时,进行还原特殊字符(XXX部分需要修改) 

 1 HtmlUtil.unescapeHtml(XXX)  

ASP.NET网站使用Kindeditor富文本编辑器配置步骤