CKeditor，以前叫FCKeditor，已經使用過好多年了，功能自然沒的說。最近升級到3.0版，好像重寫了代碼，所以構建的方式也有了些變化，應該說是更簡單了。
相關地址：
官方網站：http://ckeditor.com/
下載地址：http://ckeditor.com/download
CKfinder：http://ckfinder.com/ 用於上傳的外掛程式（有四種語言版本，根據需要下載）
部署：
將CKeditor下載下來，解壓網站/ckeditor/下面（當然名字可以修改，只是需要修改相應config檔案來設定新路徑）
調用：
在頁面的head中調用
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
然後在需要編輯器的地方放置一下代碼：
複製代碼 代碼如下:
<textarea cols="80" id="Text" name="Text" rows="10">這裡是預設值，修改文本的內容是放在這裡。html需要進行HTMLEncode編碼</textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('Text');
</script>
搞定，就這麼簡單，CKEDITOR.replace('Text')就是建立編輯器的代碼，CKEDITOR.replace()方法中還可以設定編輯器的樣式，設定如下
複製代碼 代碼如下:
var editor = CKEDITOR.replace( 'Text',
{
language:'zh-cn',//簡體中文
toolbar ://工具列設定
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
});
具體的設定有很多，具體的可以查看他的協助：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
這個設定可以在/ckeditor/config.js中設定，在這裡設定之後，就修改了編輯器的預設預設設定，而上面設定只應用於當前編輯器。
具體的設定方法如下
複製代碼 代碼如下:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置語言
//config.uiColor = '#FFF'; //背景顏色
config.width = 500; //寬度
config.height = 400; //高度
config.skin='v2'; //設定編輯器的風格，不太喜歡現在的樣子，還是喜歡v2版本的樣子，乾淨、清爽。
//工具列
config.toolbar =
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
};
資料提交
到這裡我們已經基本上設定好了。如果調用的話後台可以使用request["text"]來擷取編輯器的文本。
在fckeditor(Ver 2.0)中時，它提供了一個web控制項，可以直接使用，但是在3.x中好像沒有提供，好在我用的Asp.net Mvc所以有沒有的對我來說沒有任何問題。
提到上面的一句是因為，預設的asp.net是禁止上傳帶有html標籤的文本的，當然可以通過修改頁面的配置來實現，但是在fckeditor(Ver 2.0)中他在提交資料前對內容進行了HTMLEncode（將&<>分別替換成了&<>），確實是一個非常棒的方法，這樣就不需要對asp.net的預設設定進行修改。
但是在CKeditor中預設提交就是將原始的資料直接post了，後來通過以前老版本的代碼發現其實CKeditor提供了一個方法可以進行HTMLEncode，它就是CKEDITOR.tools.htmlEncode(string)，如果直接使用form表填submit就沒有辦法實現了，所以只能採用JavaScript進行提交。我的選擇是使用jQuery的ajax方式提交。代碼如下：
複製代碼 代碼如下:
$(function(){
$("#btSubmit").click(function(){//$("#btSubmit")擷取的是提交按鈕，這裡綁定提交按鈕的click事件
var oEditor = CKEDITOR.instances.Text;//獲得編輯器對象
var text = oEditor.getData();//擷取編輯器的資料
text = CKEDITOR.tools.htmlEncode(text);//進行HTMLEncode編碼
$.post("PostUrl",{Text:text},callback);//提交資料，具體的調用方式和傳回型別請查閱jQuery的協助
function callback(data){}//回呼函數
});
})
提交到伺服器在進行反向的編碼就可以了。
安全性
通過上面的提交雖然很好，但是繞過了系統預設的安全防禦，很容易被提交惡意代碼，所以在伺服器端還需要進行安全的驗證。
雖然CKeditor提供了驗證的設定方法，但是我沒有實驗成功(Ver2時代就沒成功)，不曉得他是怎麼運作的，有時間好好研究下，代碼如下：
複製代碼 代碼如下:
//在/ckeditor/config.js檔案的CKEDITOR.editorConfig中添加一下代碼
config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; // <iframe> tags.
config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags.
config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags.
config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.
config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;
伺服器端的驗證項目跟上面提到的一樣，都是根據標籤名稱來判斷是否允許提交。
檔案上傳
在新版本中檔案上傳方式有了很大的改變。它採用CKfinder這個外掛程式來實現，首先還是需要下載一個CKfinder解壓到網站/CKfinder/下面
路徑也可以修改，修改後需要調用代碼、/CKfinder/config.ascx檔案、/CKfinder/ckfinder.js檔案
/CKfinder/config.ascx檔案需要修改BaseUrl = "/新檔案夾名/userfiles/";
/CKfinder/ckfinder.js檔案需要修改CKFinder.DEFAULT_BASEPATH = '/新檔案夾名/';
調用方式：
複製代碼 代碼如下:
<textarea cols="80" id="Text" name="Text" rows="10"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'Text');
CKFinder.SetupCKEditor(editor, '/新檔案夾名（或預設）/');
</script>
現在在開啟編輯器的圖片、連結、flash，視窗就多了一個上傳選項卡，可以選擇上傳，還提供了瀏覽功能。
因為涉及到檔案夾的存取權限，功能與我的網站需求不符，所以我沒有使用它提供的預設上傳，對他進行了修改。
上傳方式的修改
我的圖片伺服器是image.tiyu.cc而網站的伺服器是http://www.jb51.net/，也不需要它提供的瀏覽功能，而且除了圖片上傳，不允許上傳其他的檔案。
這樣就需要有三個地方需要修改，1.修改預設上傳2.取消瀏覽功能3.取消檔案、flash上傳功能。
CKeditor的上傳路徑設定在/CKfinder/ckfinder.js中，有一項設定是CKFinder.SetupCKEditor，它的下面有以下代碼，可以設定是否需要圖片、檔案、flash的瀏覽路徑以及上傳路徑。
複製代碼 代碼如下:
//設定檔案的瀏覽路徑
editorObj.config.filebrowserBrowseUrl = url ;
//設定圖片的瀏覽路徑
editorObj.config.filebrowserImageBrowseUrl = url + qs + 'type=' + ( imageType || 'Images' ) ;
//設定flash檔案瀏覽路徑
editorObj.config.filebrowserFlashBrowseUrl = url + qs + 'type=' + ( flashType || 'Flash' ) ;
//設定檔案上傳檔案地址
editorObj.config.filebrowserUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=Files" ;
//設定圖片檔案上傳地址
editorObj.config.filebrowserImageUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( imageType || 'Images' ) ;
//設定flash檔案上傳地址
editorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( flashType || 'Flash' ) ;
根據CKeditor是根據上傳路徑的有無來控制是否顯示相應的上傳標籤，瀏覽按鈕也是。
根據上面的需求，設定如下：
複製代碼 代碼如下:
//設定檔案的瀏覽路徑
editorObj.config.filebrowserBrowseUrl = "";
//設定圖片的瀏覽路徑
editorObj.config.filebrowserImageBrowseUrl = "";
//設定flash檔案瀏覽路徑
editorObj.config.filebrowserFlashBrowseUrl = "";
//設定檔案上傳檔案地址
editorObj.config.filebrowserUploadUrl = "";
//設定圖片檔案上傳地址
editorObj.config.filebrowserImageUploadUrl = "新地址";
//設定flash檔案上傳地址
editorObj.config.filebrowserFlashUploadUrl = "";
設定到這裡再次開啟編輯器的相應視窗就會發現除了圖片上傳按鈕外其他的瀏覽上傳都隱藏掉了。
建立新的上傳檔案
具體步驟是，首先建立一個新的上傳接收檔案，接受並儲存上傳的檔案，然後將檔案的路徑反饋給編輯器。
編輯器的接收是通過一個方法實現的，具體如下：
CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');</script>
其中fnID是調用的實際方法的編號，不同的瀏覽器，CKeditor調用不同的方法。
我們只需要調用上面的方法就可以了，具體上傳成功後，在頁面上輸出一下代碼
<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(fnID, 'http://www.jb51.net/image.jpg', '上傳成功');</script>
FileUrl、Message，可以只有一個，也可以同時存在。Message主要應用於上傳失敗時的提示資訊。
關於fnID,這個具體的說明不是很清楚，但是通過代碼發現FF瀏覽器它的值是2，其他的瀏覽器是1，通過這個可以得出結論是，通過它來告知CKeditor來調用哪個方法接受上傳反饋資訊。
這個值，可以通過我們自己的程式去獲得。但是更好的方式是CKeditor給我們提供的值，當我們設定editorObj.config.filebrowserImageUploadUrl = "新地址"時CKeditor會自動為我們增加幾個個url參數：
新地址?CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn
其中CKEditorFuncNum就是我們需要的fnID，我們可以直接擷取到，然後反饋回來就好了。
如果選擇跨域上傳，只需要在當前域（http://www.jb51.net/）設定一個GetFile.aspx他有三個參數，分別是接受fnID，FileUrl、Message這三個值，在我們的editorObj.config.filebrowserImageUploadUrl中設定成http://Image.jb51.net/upfile.aspx?backUrl=http://www.jb51.net/GetFile.aspx，就可以了，image.jb51.net域的upfile.aspx接受到檔案，處理完成之後：
複製代碼 代碼如下:
ImageUrl="yun_qi_img/2009111201346_695.jpg"
Message="根據錯誤與否，設定，沒有錯誤可以為空白"
CKEditorFuncNum=request("CKEditorFuncNum")
response.Redirect("http://www.jb51.net/GetFile.php?ImageUrl="+ ImageUrl + "&Message=" + Message + "&CKEditorFuncNum=" + CKEditorFuncNum)
搞定，收工，睡覺，做個好夢。
