CKEditor是新一代的FCKeditor，是一個重新開發的版本。CKEditor是全球最優秀的網頁在線文字編輯器之一，因其驚人的性能與可擴展性而廣泛的被運用于各大網站。而CKFinder是一個功能強大的ajax文件管理器。其簡單的用戶界面使得各類用戶，不管是從高級專業人才，還是互聯網初學者，都夠直觀、快速學習的學習使用它。
網址：
CKEditor ：http://ckeditor.com/
CKFinder ：http://ckfinder.com/
CKEditor 的使用
準備工作
1. 下載CKEditor并將其解壓到Web根目錄下
2. 精簡目錄：
_samples文件夾（示例文件，可以刪除）
_source文件夾（源程序文件，可以刪除）
changes.html(更新列表，可以刪除)
install.html(安裝指向，可以刪除)
license.html(使用許可，可以刪除)
CKEditor的配置（config.js文件）
詳細api參數見:http://docs.cksource.com/ckeditor_api/,我的默認配置
復制代碼 代碼如下:
// 自定義 CKEditor 樣式
CKEDITOR.editorConfig = function(config) {
//配置默認配置
config.language = 'zh-cn'; //配置語言
// config.uiColor = '#FFF'; //背景顏色
// config.width = 400; //寬度
// config.height = 400; //高度
// config.skin = 'v2'; //編輯器皮膚樣式
// 取消 “拖拽以改變尺寸”功能
// 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'],
// ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],
// '/',
// ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],
// ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
// ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
// ['Link', 'Unlink', 'Anchor'],
// '/',
// ['Format', 'Font', 'FontSize'],
// ['TextColor', 'BGColor'],
// ['Maximize', 'ShowBlocks', '-', 'About']
// ];
};
CKEditor 的應用
1. 在 aspx 頁面或者 master 模板頁 head> 標簽中加載 ckeditor.js：
!-- 載入 CKEditor JS 文件 -->
script type="text/javascript" src="ckeditor/ckeditor.js">/script>
2. 修改頁面的page指令ValidateRequest="false"
%@ Page Language="C#" ValidateRequest="false" %>
3. 在body>標簽中使用ckeditor：
!-- 使用 ckeditor 必須定義 class="ckeditor" -->
asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine"
Text='%# Bind("info") %>' runat="server">/asp:TextBox>
4. 獲取或設置編輯器中的內容
//獲取編輯器中的內容
lblView.Text=Server.HtmlEncode( this.txtContent.Text);
//設置編輯器中的內容
//txtContent.Text = Server.HtmlDecode("h1>設置內容/h1>");
CKFinder 的使用
準備工作
1. 下載CKFinder的Asp.NET版，將其解壓到Web根目錄下
2. 復制/bin/Release目錄下的ckfinder.dll文件至站點bin目錄
3. 精簡目錄：
_samples文件夾（示例文件，可以刪除）
_source文件夾（源程序文件，可以刪除）
CKFinder的配置
1. 打開 " \ckfinder\config.ascx "，為SetConfig方法中的 BaseUrl 指定默認路徑，如：
// 以userfiles 為默認路徑，其目錄下會自動生成images、flash等子目錄。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE：注意“ ~/ ”。
2. 與CKEditor集成
打開CKEditor目錄中的config.js文件在function 函數中
復制代碼 代碼如下:
// 自定義 CKEditor 樣式
CKEDITOR.editorConfig = function(config) {
……
};
加入如下內容：
復制代碼 代碼如下:
// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路徑選擇要正確。
config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUploadtype=Files';
config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUploadtype=Images';
config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUploadtype=Flash';
// config.filebrowserWindowWidth = '800';
// config.filebrowserWindowHeight = '500';
CKFinder的應用
1. 在工具欄中添加站點根目錄bin目錄中的ckfinder.dll控件
2. 拖放控件到Web頁面
3. 修改CKFinder控件屬性BasePath為ckfinder目錄的相對路徑
常見問題
1. 癥狀：因為安全原因，文件不可瀏覽。請聯系系統管理員并檢查CKFinder配置文件。
原因：未設置用戶身份驗證或者用戶未登錄。
語句：
復制代碼 代碼如下:
public override bool CheckAuthentication()
{
return false;
}
解決：在CKFinder的config.ascx文件中修改public override bool CheckAuthentication() 加入用戶身份權限驗證方法。
2. 癥狀：未知錯誤
原因：設置不進行用戶身份驗證，但是 BaseUrl 路徑不對。
語句：
復制代碼 代碼如下:
public override bool CheckAuthentication()
{
return true ;
}
解決：在CKFinder的config.ascx文件中的public override void SetConfig() 修改
// 以userfiles 為默認路徑，其目錄下會自動生成images、flash等子目錄。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE：注意“ ~/ ”。
3. 癥狀：訪問帶有CKFinder的頁面時報錯“HTTP 錯誤 404 - Not Found”
解決：修改CKFinder控件的BasePath屬性為ckfinder目錄的相對路徑
您可能感興趣的文章:- CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入圖片）
- 解決FCKEditor在IE10、IE11下的不兼容問題
- FCKeditor使用方法(FCKeditor_2.6.3)詳細使用說明
- asp.net+FCKeditor上傳圖片顯示叉叉圖片無法顯示的問題的解決方法
- 修改fckeditor的文件上傳功能步驟
- ckeditor的使用和配置方法分享
- ASP FCKeditor在線編輯器使用方法
- 整合ckeditor+ckfinder，解決上傳文件路徑問題
- FckEditor 配置手冊中文教程詳細說明
- PHP CKEditor 上傳圖片實現代碼
- CKEditor網頁編輯器 中文使用說明
- FCKeditor2.3 For PHP 詳細整理的使用參考
- javascript獲取ckeditor編輯器的值(實現代碼)
- asp.net ckeditor編輯器的使用方法
- 通過Fckeditor把圖片上傳到獨立圖片服務器的方法
- 關于CKeditor的非主流個性應用的設置
- asp中的ckEditor的詳細配置小結
- CKEditor4配置與開發詳細中文說明文檔
