在asp.net中KindEditor編輯器的使用方法小結(jié)

更新時間：2010年12月30日 16:54:34 作者：

由于國外的服務器好象對一些要引用dll編輯器由于安全問題,鎖定了web.config中的一些權(quán)限,在先試了FreeTexbox不行,FCKEditor也不行,因為都是要引用dll文件,最后同事介紹一款純js的kindeditor編輯器,

下載下來可是不會用啊,網(wǎng)上也找不到類似的方法,可能都沒遇到過這樣的問題,,經(jīng)過一個晚上的研究demo及同事一起幫忙,終于研究出了如何使用,自己總結(jié)一下,也希望對以后需要的人有所幫助.這里以一個從數(shù)據(jù)庫讀取和保存為例子,其它參數(shù)請參考kindeditor官方網(wǎng)站
1.首先把下面拷到要用編輯器的路徑

復制代碼代碼如下:

 
<input type="hidden" name="content1" id="content1" value='<% = databind %>'/> 
<input type="hidden" name="content" runat="server" id="content"/> 
<script type="text/javascript" src="KindEditor.js"></script> 
<script type="text/javascript"> 
document.getElementById("content").value=document.getElementById("content1").value; //這句是因為不能直接把content做為服務器控件才用的,也就是不需要使用<%=this.Content.ClientID%>的,那樣數(shù)據(jù)讀不出來, 
var editor = new KindEditor("editor"); 
editor.hiddenName = "content"; //這里是具有Runat="server"屬性的input隱藏框名稱 
editor.editorWidth = "100%"; 
editor.editorHeight = "280px"; 
editor.show(); 
function KindSubmit() { 
editor.data(); 
} 
</script> 

2.保存按鈕

復制代碼代碼如下:

 
<asp:Button ID="CreateAdmine" runat="server" Height="22" Text="保 存" Width="42" OnClientClick="KindSubmit()" OnClick="CreateAdmine_Click" /> //要客戶端提交才能保存 

3.后臺讀取
Aspx頁:

復制代碼代碼如下:

 
<input type="hidden" name="content" id = "content" value='<%=EditorValue %>' /> //這里要用<% =變量 %> 讀取服務器端EditorValue變量的值為編輯器初始化內(nèi)容 
<input type="hidden" name="contents" runat="server" id="contents"/> 
<script type="text/javascript" src="/editor/KindEditor.js"></script> 
<script type="text/javascript"> 
//document.getElementById("<%=this.contents.ClientID %>").value = document.getElementById("content").value; 
document.getElementById("contents").value = document.getElementById("content").value; 
var editor = new KindEditor("editor"); 
editor.hiddenName = "contents"; 
editor.skinPath = "/editor/skins/default/"; 
editor.iconPath = "/editor/icons/"; 
editor.imageAttachPath = "/editor/attached/"; 
editor.imageUploadCgi = "/editor/upload_cgi/upload.aspx"; 
editor.cssPath = "/editor/common.css"; 
editor.editorType = "simple"; 
editor.editorWidth = "500px"; 
editor.editorHeight = "300px"; 
editor.show(); 
function KindSubmit() 
{ 
editor.data(); 
} 
</script> 

CS代碼:

復制代碼代碼如下:

 
protected string EditorValue; //定義一個變量,客戶端讀取這個變量的值賦給編輯器 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!Page.IsPostBack) 
{ 
BindData(); 
} 
} 
private void BindData() 
{ 
string sql = "select Content from About where id=1"; 
DataBase db = new DataBase(); 
SqlDataReader dr = db.ReturnDataReader(sql); 
try 
{ 
if (dr.Read()) 
{ 
EditorValue = dr["Content"].ToString().Trim(); //在這里給它賦初始內(nèi)容 
} 
} 
catch (Exception msg) 
{ 
Response.Write(msg.Message); 
} 
finally 
{ 
db.Close(); 
} 
} 