Asp.net CKeditor+CKfinder(html編輯器)

一、下載元件

 

FCKeditor 從 3.0版開始 就改名為CKeditor

也把上傳元件分開成為 CKfinder

 

現在要介紹的版本是 CKeditor 3.5.3 for Asp.net 跟 CKfinder 2.0.2.1 (目前是DEMO版)

都可以到官網下載  http://ckeditor.com/

 

下載完後

 

二、配置元件

1、添加對應的文件

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

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

3、修改配置文件

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', 'RemoveFor​​mat'], 
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], 
['Image', 'Flash', 'Table', 'Horizo​​ntalRule', 'SpecialChar'], '/',
['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
];

//在CKEditor中使用CKFinder，注意對應文件的路徑

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' ; }
config.htmlEncodeOutput = true; 

}

CKFinder的配置：

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

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

BaseDir = "";

BaseUrl使用完整網域路徑；
BaseDir使用完整實體路徑；

並且更改：

public override bool CheckAuthentication() 
{
        //return false;       
return true ; 

}

這樣配置就算完成了

三、在頁面應用CKEditor控件

1、在開頭宣告：

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

2、然後，在中需要放置該控件的位置加入如下代碼：

去掉CKfinder demo提示

在ckfinder目錄下，找到ckfinder.js ，修改

1、右下角提示：

找到 if(!t)this.dV().aC(0).appendHtml(p); 删除

2、文件列表上方提示：

查到 if(N.files.length)N.fa=G;Q=1; 删除