发布于 2016-05-30 12:37:04 | 248 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的CKEditor 4 开发人员指南，程序狗速度看过来！

CKEditor网页编辑器

CKEditor 即 FCKEDITOR 。FCKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了FCKeditor。

---

Fckeditor相信大家都知道。ckeditor是fckeditor的重写版，它的载入速度更快，界面更漂亮，更强的课定制性。试用了一下，下面介绍一下它在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>"); 
} 

Ok