快捷導(dǎo)航

ASP.NET網(wǎng)站使用Kindeditor富文本編輯器配置步驟

更新時間：2013年06月06日 17:34:35 作者：

首先下載編輯器然后部署編輯器最后在網(wǎng)頁中加入(ValidateRequest="false")引入腳本文件，具體配置步驟如下，有需求的朋友可以了解下哈

1. 下載編輯器
下載 KindEditor 最新版本，下載頁面: http://www.kindsoft.net/down.php

2. 部署編輯器
解壓 kindeditor-x.x.x.zip 文件，將editor文件夾復(fù)制到web目錄下

3、在網(wǎng)頁中加入(ValidateRequest="false")

復(fù)制代碼代碼如下:

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

4、引入腳本文件（XXX部分需要修改）

復(fù)制代碼代碼如下:

 
<!--富文本編輯器配置↓ --> 
<link type="text/css" rel="stylesheet" href="../editor/themes/default/default.css" /> 
<link rel="stylesheet" href="../editor/plugins/code/prettify.css" /> 
<script type="text/javascript" charset="utf-8" src="../editor/kindeditor-min.js"></script> 
<script type="text/javascript" charset="utf-8" src="../editor/lang/zh_CN.js"></script> 
<script type="text/javascript" charset="utf-8" src="../editor/plugins/code/prettify.js"></script> 
<script type="text/javascript"> 
KindEditor.ready(function (K) { 
var editor1 = K.create('#XXX', { 
items: [ 
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 
'removeformat', 'strikethrough', 'lineheight', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 
'insertunorderedlist', '|', 'emoticons', 'link', 'insertfile', 'media', '|', 'image', 'multiimage', 'map', 'baidumap', '|', 'preview', 'fullscreen', 
], 
cssPath: '../editor/plugins/code/prettify.css', 
uploadJson: '../editor/asp.net/upload_json.ashx', 
fileManagerJson: '../editor/asp.net/file_manager_json.ashx', 
allowFileManager: true, 
pasteType: 1, 
afterCreate: function () { 
var self = this; 
K.ctrl(document, 13, function () { 
self.sync(); 
K('form[name=XXX]')[0].submit(); 
}); 
K.ctrl(self.edit.doc, 13, function () { 
self.sync(); 
K('form[name=XXX]')[0].submit(); 
}); 
} 
}); 
prettyPrint(); 
}); 
</script> 
<!--富文本編輯器配置↑--> 

5、使用編輯器（XXX部分需要修改）

復(fù)制代碼代碼如下:

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

6、根據(jù)自己的需要修改配置（文件路徑：web\editor\asp.net\file_manager_json.ashx）

復(fù)制代碼代碼如下:

 
//根目錄路徑，相對路徑 
String rootPath = "../../"; 
//根目錄URL，可以指定絕對路徑 
String rootUrl = aspxUrl + "../attached/"; 
//圖片擴展名 
String fileTypes = "gif,jpg,jpeg,png,bmp"; 

7、后臺獲取編輯器內(nèi)容（XXX部分需要修改）

復(fù)制代碼代碼如下:

Request.Form["XXX"]

由于服務(wù)器端程序(ASP、PHP、ASP.NET等)直接顯示內(nèi)容，則必須轉(zhuǎn)換HTML特殊字符(>,<,&,”)，所以寫了個工具類

復(fù)制代碼代碼如下:

 
public class HtmlUtil 
{ 
/// <summary> 
/// 替換HTML特殊字符 
/// </summary> 
/// <param name="content"></param> 
/// <returns></returns> 
public static String escapeHtml(String content) 
{ 
return content.Replace("&", "&") 
.Replace("<", "<") 
.Replace(">", ">") 
.Replace("\"", """); 
} 
/// <summary> 
/// 還原HTML特殊字符 
/// </summary> 
/// <param name="content"></param> 
/// <returns></returns> 
public static String unescapeHtml(String content) 
{ 
return content.Replace("&", "&") 
.Replace("<", "<") 
.Replace(">", ">") 
.Replace(""", "\""); 
} 
} 