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="../editor/themes/default/default.css" /> 3 <link rel="stylesheet" href="../editor/plugins/code/prettify.css" /> 4 <script type="text/javascript" charset="utf-8" src="../editor/kindeditor-min.js"></script> 5 <script type="text/javascript" charset="utf-8" src="../editor/lang/zh_CN.js"></script> 6 <script type="text/javascript" charset="utf-8" src="../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)