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