CKeditor在ASP.NET中的使用方法

1. 下載ckeditor放到網站目錄下。地址：http://ckeditor.com/


引用js

<script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script>

3.添加一個編輯框

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>

4.在下面添加如下代碼

代碼如下:

<script type="text/javascript">

//<![CDATA[

CKEDITOR.replace( '<%=mckeditor.ClientID %>',// mckeditor.ClientID為TextBox mckeditor產生的對應用戶端看到的id

{

skin : 'office2003',//設定皮膚

enterMode : Number( 2),//設定enter鍵的輸入1.<p>2為<br/>3為<div>

shiftEnterMode : Number( 1), // 設定shiftenter的輸入

});

//]]>

</script>

像上面這樣就可以完成基本的功能了，但是有的時候我們要上傳檔案，cfeditor的檔案功能是通過外掛程式實現的，下面介紹檔案外掛程式的CKFinder的配置

1. 到http://www.ckfinder.com/下載外掛程式（主意選擇asp.net版的），放到網站目錄下

2. 在之前的ckeditor配置資訊後面添加如下代碼

代碼如下:

filebrowserBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html")%>',

filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>',

filebrowserFlashBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Flash")%>',

filebrowserUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',

filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',

filebrowserFlashUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'

3. 修改config.ascx檔案中的BaseUrl = "/uploads/"（檔案上傳目錄） 和CheckAuthentication()上傳身分識別驗證。

4. 排除樣本檔案夾中的fckeditor相關的檔案，或者直接刪除。（引用了fckeditor相關的命名空間）

有fckeditor.aspx popup.aspx popups.aspx.三個檔案

之後應該使用就基本沒問題了，但是如果項目中有幾個地方都用到了編輯器，就要每個地方都寫一段配置資訊豈不是很麻煩，所以做了個簡單的控制項，代碼如下：ascx檔案

代碼如下:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="mpckeditor.ascx.cs" Inherits="mpckeditor" %>

<script language="javascript" type="text/javascript" src='<%=ResolveUrl("~/ckeditor/ckeditor.js")%>'></script>

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>

<script type="text/javascript">

//<![CDATA[

CKEDITOR.replace( '<%=mckeditor.ClientID %>',

{

skin : 'office2003',

enterMode : Number( 2),

shiftEnterMode : Number( 1),

filebrowserBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html")%>',

filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>',

filebrowserFlashBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Flash")%>',

filebrowserUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files")%>',

filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>',

filebrowserFlashUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash")%>'

});

//]]>

</script>

Cs檔案：

代碼如下:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class mpckeditor : System.Web.UI.UserControl

{

public string value

{

set { mckeditor.Text = value; }

get { return mckeditor.Text; }

}

protected void Page_Load(object sender, EventArgs e)

{

}

使用的地方只要把控制項拖過來，後台字碼頁很簡單Mpckeditor1.value就可以給它賦值或擷取值

代碼如下:

<uc1:mpckeditor id="Mpckeditor1" runat="server" value="瘋子來測試"> </uc1:mpckeditor>

protected void Button1_Click(object sender, EventArgs e)

{

Response.Write("<script language='javascript'>alert('" + HttpUtility.HtmlEncode(Mpckeditor1.value) + ";')</script>");

}