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文件：

 代码如下:

 usingSystem;

 usingSystem.Data;

 usingSystem.Configuration;

 usingSystem.Collections;

 usingSystem.Web;

 usingSystem.Web.Security;

 usingSystem.Web.UI;

 usingSystem.Web.UI.WebControls;

 usingSystem.Web.UI.WebControls.WebParts;

 usingSystem.Web.UI.HtmlControls;

 publicpartial class mpckeditor : System.Web.UI.UserControl

 {

 publicstring value

 {

 set{ mckeditor.Text = value; }

 get{ return mckeditor.Text; }

 }

 protectedvoid Page_Load(objectsender, EventArgs e)

 {

 }

  

使用的地方只要把控件拖过来，后台代码页很简单Mpckeditor1.value就可以给它赋值或获取值

 代码如下:

 <uc1:mpckeditor id="Mpckeditor1"runat="server" value="疯子来测试"> </uc1:mpckeditor>

 protectedvoid Button1_Click(objectsender, EventArgs e)

 {

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

  

}