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

  

posted @ 2012-02-22 17:32  SOD_QWER  阅读(555)  评论(0)    收藏  举报