asp.net ckeditor編輯器的使用方法

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>");
}

Ok