CKEditor和CKFinder配置（asp.net）

一、官方Download

1、CKEditor ：点击CKEditor.NET标题下的“Download zip”按钮

Version：CKEditor 3.6.4 for ASP.NET, Released 8 Aug 2012

2、CKFinder ：点击Asp.net标签下的“Download”按钮

Version: 2.3.1 , Released 4 Jan 2013 , Changelog

——CKEditor是新一代的FCKEditor，很明显的不同点是CKEditor中文件上传功能独立出来了，需要配合使用CKFinder才能实现。

二、具体配置顺序

1、在项目中添加对应的文件

右击网站，添加引用。依次添加两个文件夹中“\bin\Debug” 中的dll文件——CKEditor.NET.dll、CKFinder.dll

此外还要添加System.Design

2、将文件夹“ckeditor”、“ckfinder”添加到网站的根目录下

此版本对于CKEditor只需要“\_Samples”文件夹下的“ckeditor”文件夹即可，其余都可不要。

CKFinder文件夹中的_source文件夹、 _sample文件夹（源程序文件，可以删除）
changes.html(更新列表，可以删除)
install.html(安装指向，可以删除)
license.html(使用许可，可以删除)

3、修改配置文件

（1）CKEditor配置：打开“ckeditor\config.js”文件，根据需要添加配置信息

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    //CKFinder.SetupCKEditor(null, '../ckfinder/'); //注意ckfinder的路径对应实际放置的位置
    config.skin = 'v2'; // 皮肤
    //config.uiColor = '#FFF'; // 皮肤背景颜色
    //config.resize_enabled = false;   // 取消 “拖拽以改变尺寸”功能   
    config.language = 'zh-cn'; //配置语言 
    config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; // 字体
    config.width = 771; //宽度
    config.height = 300; //高度

    //config.toolbar = "Basic";  // 基础工具栏
    config.toolbar = "Full";  // 全能工具栏 
    // 自定义工具栏  
    config.toolbar_Full =
    [
        ['Source', '-', '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', 'Blockquote', 'CreateDiv'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Link', 'Unlink', 'Anchor'],
          ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
        '/',
        ['Styles', 'Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor'],
        ['Maximize', 'ShowBlocks', '-', 'About']
    ];

    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';  //上传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'; //上传Flash按钮(标签)

};

此处的“//CKFinder.SetupCKEditor(null, '../ckfinder/'); //注意ckfinder的路径对应实际放置的位置”我屏蔽之后才能显示出编辑器，不知为啥，求高手指点。

（2）CKFinder的配置：

打开“ckfinder\”下的用户控件config.ascx，更改其BaseUrl路径：

BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";

并且更改：

public override boolCheckAuthentication()  {
        //return false;
       return true; //此处直接设置为true有一些危险，正式使用时要适当加入自己的判断逻辑

}

 

三、在页面应用CKEditor控件

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>