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
 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com