ASP.NET下CKEditor和CKFinder集成 配置

最近才开始学习asp.net动态网页制作，涉及到后台文字图片编辑的时候用到了CKEditor和CKFinder

网上找了很多资料，发现都不尽如人意，自己整了一个晚上，终于有点心得体会，发表在这里。如有什么不对的地方还望大牛们批评指出。本人第一次写技术博文，有什么不足的地方请大家见谅，新手啊新手！！！

一、下载CKEditor，下载地址：

CKEditor：http://ckeditor.com/download

注：需要下载的是CKEditor和CKEditor.NET。

CKFinder：http://ckfinder.com/download

注：下载CKFinder时注意选择的是ASP.NET的版本，默认是PHP别下错了。

  

二、配置

CKEditor的配置

解压下载所得的3个文件夹，分别是ckfinder,ckeditor和asp.net。

可以删除文件夹内部分内容：

ckeditor：_samples：这是一个示例，可以删除。

_source:这里是javascript的源代码，其实下面的文件夹中已经包含，不想自己拓展开发的可以删除。

lang：这是多语言支持包，我们这里就使用中文和英文，可以将里面除了en，zh开头的*.js文件都删除。

skin：主题皮肤，选择自己想要的一个主题，删除不必要的。

CHANGES/LICENSE/INSTALL.Html:分别是版本更新、授权、安装指导，可删除。

   其他*.asp,*.php的文件:在其他开发环境中用到，可删除。

 

        asp.net: 我们这里只需要用到其中bin/Release文件夹下CKEditor.NET.dll的动态库就可以了，其他可以都删除

         ckfinder：同理删除

                     _samples,_source,3个*.txt文档,以及skin,lang中部分内容

help文件夹中除了en文件夹外的其他文件夹（当然你可以全部删除，不过这样在点击ckfinder帮助的时候，就不会有内容出现）

bin文件夹参照asp.net文件夹中bin的操作。

好了，看一下，ckeditor和ckfinder文件夹从原来的5.67和2.15MB变成了872KB和725KB

继续我们来将ckeditor作为控件添加入visual studio中

         建立一个ASP.NET Web Site。

将CKEditor文件夹复制到新建项目根目录下

 

default.aspx页下在Toolbox中右击鼠标弹出如下菜单：

        

选择Choose Items

 

 

确认后发现工具栏多了一个CKEditorControl的控件，这样就可以像其他asp.net的服务器控件一样使用了。

 

 

在aspx页中加入如下内容：

放在<%@ Page Laguage=..... %>的下一行，

 <%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

尝试将一个CKEditor控件加入网页中运行，发现其仅支持图片flash资源的链接引用，无法实现资源的本地上传。

这时候就要用到CKFinder这个控件了。

CKFinder的配置

将CKFinder文件夹复制到新建项目根目录下

将刚才ckfinder中bin/Release文件夹下的CKFinder.DLL动态库添加入当前项目的Bin文

件夹下，如下图所示

 

将CKFinder集成入CKEditor环境下：

 

打开config,js源文件

修改CKEDITOR.editorConfig=function(config)如下：（已对一些功能进行了删改）

 

CKEDITOR.editorConfig = function( config )

{

         config.skin='kama'//kama,v2,office2003,皮肤设置

    config.language = 'zh-cn'; //设置中文环境

    //config.uiColor = '#BFEE62'; //编辑器颜色设置

config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //编辑字体设置

//功能设置

    config.toolbar_Full =

    [

        [ '-', 'Preview', '-', 'Templates'],

        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print'],//, 'SpellChecker', 'Scayt'],

        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],

        //['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

        ['Bold', 'Italic', 'Underline', 'Strike'],

        '/',

        [ '-', 'Subscript', 'Superscript'],

        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],

        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],

        ['Link', 'Unlink'],

          ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],

        '/',

        ['Styles', 'Format', 'Font', 'FontSize'],

        ['TextColor', 'BGColor'],

        ['Maximize', '-']

    ];

 

    config.toolbar_Basic =

    [

        ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']

];

//设置引用路径

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

    config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';

    config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

config.filebrowserUploadUrl =

'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';

    config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';

config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

    //设置编辑器长宽属性

config.filebrowserWindowWidth = '800';

    config.filebrowserWindowHeight = '500';

};

 

 

 

在config.ascx中找到如下语句，更改为：

BaseUrl = "~/";//此处设置了打开服务器时默认访问目录为根目录

修改其中的CheckAuthentication函数为如下形式

         public override bool CheckAuthentication()

         {

                   return true;

         }

 

好了，打开网页查看一下

好了，大功告成。