Asp.net 中配置 CKEditor和CKFinder

2012年3月30日  天氣有小雨    有時候一點小錯誤，導致你浪費半天的時間。太粗心了，因爲自己的一點小失誤，導致了配置一下午。工科不能馬虎。

一、下載文件

CKEditor文本操作控件

CKFinder上傳控件

版本可以不一樣，但配置都是一樣的

1、在項目中添加對應的文件

右擊網站，添加引用。依次添加兩個文件夾中“\bin\Debug” 中的dll文件——CKEditor.NET.dll、CKFinder.dll

2、將文件夾“ckeditor”、“ckfinder”添加到網站的根目錄下

注意，下載的文件中包括很多用不到的文件，可以稍微清理一下：

此版本對於CKEditor只需要“\_Samples”文件夾下的“ckeditor”文件夾即可，其餘都可不要。

_source文件夾（源程序文件，可以刪除）
changes.html(更新列表，可以刪除)
install.html(安裝指向，可以刪除)
license.html(使用許可，可以刪除)

3、修改配置文件

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

CKEDITOR.editorConfig = function(config) {

config.skin = 'v2'; //選擇皮膚，源文件在“ckeditor\skins\”中
config.resize_enabled = false;

// 基礎工具欄
// config.toolbar = "Basic";   
// 全能工具欄
// config.toolbar = "Full";   
// 自定義工具欄
config.toolbar =
[
['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
];

}

（2）在CKEditor中集成CKFinder，注意對應文件的路徑

將下面的內容繼續添加到“ckeditor\config.js”文件中

CKEDITOR.editorConfig = function(config) {

//……//前面的不覆蓋他

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要寫成"~/ckfinder/..."或者"/ckfinder/..."
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';  //“瀏覽服務器”彈出框的size設置
config.filebrowserWindowHeight = '500'; 
};

（3）CKFinder的配置：

打開“ckfinder\”下的用戶控件config.ascx，更改其BaseUrl路徑：

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

並且更改：

public override boolCheckAuthentication()  {
        //return false;
       return true; //此處直接設置爲true有一些危險，正式使用時要適當加入自己的判斷邏輯

}

(4)頁面調用

    protected void Page_Load(object sender, EventArgs e)
    {
        CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
        _FileBrowser.BasePath = "../ckfinder/";//此路徑根據你的頁面文件路徑而改變，如果你的當前頁面在根上，“ckfinder/”
        _FileBrowser.SetupCKEditor(CKEditorControl1);//啓動你的editor控件
    }

頁面調用   因爲引用時 每次還要加一段服務器代碼，很麻煩，建議用這種

在ckeditor(是ckeditor)的config.js文件中加入幾段代碼, 如：

CKEDITOR.editorConfig = function(config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
//以下是需要加入的

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';

　　//加入後會發現ckeditor框中多了"上傳"
};