在asp.net中KindEditor編輯器的使用方法小結(jié)
更新時間:2010年12月30日 16:54:34 作者:
由于國外的服務(wù)器好象對一些要引用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做為服務(wù)器控件才用的,也就是不需要使用<%=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 %>' /> //這里要用<% =變量 %> 讀取服務(wù)器端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();
}
}
4.保存的值
Name = content.Value;
1.首先把下面拷到要用編輯器的路徑
復(fù)制代碼 代碼如下:
<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做為服務(wù)器控件才用的,也就是不需要使用<%=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.保存按鈕
復(fù)制代碼 代碼如下:
<asp:Button ID="CreateAdmine" runat="server" Height="22" Text="保 存" Width="42" OnClientClick="KindSubmit()" OnClick="CreateAdmine_Click" /> //要客戶端提交才能保存
3.后臺讀取
Aspx頁:
復(fù)制代碼 代碼如下:
<input type="hidden" name="content" id = "content" value='<%=EditorValue %>' /> //這里要用<% =變量 %> 讀取服務(wù)器端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代碼:
復(fù)制代碼 代碼如下:
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();
}
}
4.保存的值
復(fù)制代碼 代碼如下:
Name = content.Value;
您可能感興趣的文章:
相關(guān)文章
關(guān)于jsp版ueditor1.2.5的部分問題解決(上傳圖片失敗)
這篇文章主要介紹大家在使用jsp版ueditor1.2.5的碰到的一些問題解決方法,需要的朋友可以參考下2013-06-06Ueditor和CKeditor 兩款編輯器的使用與配置方法
這篇文章主要介紹了Ueditor和CKeditor 兩款編輯器的使用與配置方法,需要的朋友可以參考下2017-03-03fckeditor常用Js,獲取fckeditor內(nèi)容,統(tǒng)計fckeditor字?jǐn)?shù),向fckeditor寫入指定代碼
fckeditor常用Js,獲取fckeditor內(nèi)容,統(tǒng)計fckeditor字?jǐn)?shù),向fckeditor寫入指定代碼2010-08-08Windows Live Writer 實現(xiàn)代碼高亮
有時會包含大量代碼,如果能在文章中高亮顯示代碼文章的可讀性肯定會好很多。2009-05-05針對PHP環(huán)境下Fckeditor編輯器上傳圖片配置詳細教程
今天介紹Fckeditor上傳圖片功能在PHP中的配置方法,涉及Fckeditor上傳圖片的上傳路徑配置、限制Fckeditor上傳圖片大小設(shè)置、Fckeditor上傳圖片文件名重名及亂碼解決方法以及針對上傳圖片添加水印功能的實現(xiàn)方法,只要掌握了以上四點,F(xiàn)ckeditor在大部分PHP類型網(wǎng)站中的應(yīng)用都能解決2014-04-04網(wǎng)頁編輯器FCKeditor 2.6.4精簡配置方法
今天看到網(wǎng)上有人問asp中FCKeditor的配置方法,特整理了一些文檔方便需要的朋友2012-03-03