CKEditor是一個專門使用在網頁上的所得文字編輯器，適用於PHP、ASP.NET、Java等后端開發語言。CKEditor原名為FCKeditor，“FCK” 是這個編輯器的作者的名字Frederico Caldeira Knabben的縮寫。 09年發布更新到3.0，並改名為CKEditor，CK意指"Content and Knowledge"。 新版的編輯器的更新包括：新的用戶界面，一個支持Plug-in的Javascript API，並提供對視覺障礙者的使用支持
CKEditor默認是沒有“上傳功能”的，如果需要上傳則需要CKFinder插件。CKFinder是一個強大而易於使用的Web瀏覽器的Ajax文件管理器。 其簡單的界面使得它直觀，快速學習的各類用戶，從高級人才到互聯網初學者。
1、下載程序包
① CKEditor
CKEditor每個版本都有好多類型，例如：“CKEditor 3.6.4 for ASP.NET”、“CKEditor 3.6.4 for Java”和“Standard”。由於CKEditor完全由JavaScript、CSS等前端技術開發完成，與后端語言無關，因此只要下載“Standard”版本即可。 下載地址：Download | CKEditor.com
② CKFinder
CKFinder為CKEditor的一個“文件上傳和管理”的插件，CKFinder每個版本都有有PHP、Java、ASP和ASP.NET四種類型，根據開發需要選擇合適的類型，本文以ASP.NET版本為例，下載地址：CKFinder - Get Free Trial。
2、安裝和部署
① CKEditor
下載完成后解壓，將整個“ckeditor”放在網站的任意目錄下，本文是放在“/PlugIns/”目錄下，如下圖：
② CKFinder
下載好ASP.NET版本的CKFinder后並解壓，將整個“CKFinder”放在網站的任意目錄下，本文是放在“/PlugIns/”目錄下，如圖
3、簡單配置
CKEditor和CKFinder配置項比較多，也十分細。本文僅是簡單的配置保證能夠正常使用。
① /PlugIns/ckeditor/config.js
不同版本的CKEditor默認配置並不相同，下面是我的習慣配置
CKEDITOR.editorConfig = function( config ) {
config.language = 'zh-cn'; // 中文
config.tabSpaces = 4; // 當用戶鍵入TAB時，編輯器走過的空格數，當值為0時，焦點將移出編輯框
config.toolbar = "Custom_RainMan"; // 工具條配置
config.toolbar_Custom_RainMan = [
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','Templates','Source']
];
};
② /PlugIns/ckfinder/config.ascx
A、更改CheckAuthentication()的返回值
CheckAuthentication()返回True表示可以上傳，返回False則表示不能上傳，具體能否上傳需要開發者自己判斷，本文僅簡單更改為True（允許上傳）。
B、更改License和存儲目錄
如果沒有License則不用更改，CKFinder仍然可以正常使用，不過相關頁面中有少部分廣告。
CKFinder默認的文件存儲目錄為"/ckfinder/userfiles/”，可以根據項目需求設置不同存儲目錄
③ 刪除“/ckfinder/_samples”和“/ckfinder/_source”兩個文件夾
刪除“/ckfinder/_samples”和“/ckfinder/_source”兩個文件夾，若不刪除則會出現“重復的"AssemblyCompany"特性”的錯誤，如下圖：
④ 添加CKFinder引用
將“/PlugIns/ckfinder/bin/Release/CKFinder.dll”添加到項目引用當中
4、示例
創建編輯也比較簡單，引入兩JS文件，並使用JavaScript實例化即可，具體如下。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Editor</title>
<script type="text/javascript" src="/PlugIns/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/PlugIns/ckfinder/ckfinder.js"></script>
</head>
<body>
<textarea id ="post_content" name="post_content"><p>編輯器內容</p></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('post_content'); // 創建編輯器
CKFinder.setupCKEditor(editor, '/PlugIns/ckfinder/'); // 為編輯器綁定"上傳控件"
</script>
</body>
</html>
效果圖：
