開源網(wǎng)頁編輯軟件FCKEditor在09年發(fā)布更新到3.0，并改名為CKEditor。改進(jìn)后的ckeditor更加模塊話，配置更加靈活，和以前的fckeditor使用方式上也有所不同。在我的mvc項(xiàng)目中由于要用到 ckeditor，特意研究了下它的使用方法，寫下來和大家分享。
最新發(fā)布的CKFinder 1.4版 已經(jīng)提供了對(duì)CKEditor3.0的支持CKFinder 1.4 下載地址：http://ckfinder.com/CKEditor3.0 下載地址：http://ckeditor.com/
下載后直接解壓得到ckeditor文件夾，包括如下內(nèi)容：
其中sample為例子，source為源文件，為了減少editor的體積，直接刪除。其他你也可刪除一些，像語言只留zh-cn。然后將整個(gè)文件夾直接拷貝到網(wǎng)站\htdocs\newtp\Public\Js下
在你需要使用editor控件的頁面頭部添加：
1 | <head> <script type="text/javascript" src="__PUBLIC__/Js/ckeditor/ckeditor.js"></script></head> |
在頁面相應(yīng)位置上添加：
1 | <textarea name="editor1"></textarea> |
2 | <script type="text/javascript"> window.onload = function() { CKEDITOR.replace( 'editor1' ); };</script> |
注意：js代碼一定要寫在textarea后,其實(shí)可以這樣理解editor控件只是對(duì)textarea做了一個(gè)漂亮的包裝，我們的輸入其實(shí)都在上面的texarea中，最終也是通過textarea提交到服務(wù)器端。新的editor中去除了上傳功能，也就是說我們不能通過上傳插入圖片、flash了。如圖：editor中的插入圖片對(duì)話框并沒有提供上傳功能：
幸好有個(gè)插件ckfinder可以輔助我們完成以下功能，插件的下載地址同樣在http://ckeditor.com/ 最新版本：ckfinder_aspnet_1.4.1.1解壓后，得到一個(gè)名為ckfinder的文件夾，同樣刪除掉source、sample目錄（原因同上），拷貝到和ckeditor同級(jí)。如圖：
注意：這里還有些配置必須要做：
把文件夾中的bin目錄下的dll文件添加到網(wǎng)站的引用中，防止出現(xiàn)找不到類的錯(cuò)誤。
打開config.php，修改function CheckAuthentication() { reture false；//改為return true； }此處修改是為了有權(quán)限上傳。
及上傳的目錄$baseUrl = ‘/newtp/Public/uploads/’;
接下來就要把ckfinder集成到ckeditor中了，代碼如下：
1 | var editor = CKEDITOR.replace('editor1'); CKFinder.SetupCKEditor(editor, '/newtp/Public/Js/ckeditor/ckeditor.js'); |
當(dāng)然，在頁面相應(yīng)位置引用script代碼是必不可少的。好了，最后一步了，由于ckfinder不是免費(fèi)的，所以默認(rèn)情況下會(huì)在上傳頁面中有紅色的廣告提示，雖然不影響使用，但總是覺得不爽。去除方法如下：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，將其中的en.call(window,qo); 代碼注釋或直接刪除。至此我們的ckfinder全部配置完畢，運(yùn)行效果如下：
補(bǔ)充：要自己配置eidtor的外觀，可打開eidtor文件夾下的：config.js文件進(jìn)行配置。
1 | CKEDITOR.editorConfig = function( config ){ |
此處配置是針對(duì)網(wǎng)站中所有頁面的editor，如單個(gè)頁面需要單獨(dú)配置，直接在頁面中寫配置代碼，示例如下：CKEDITOR.config.height = 400;
完整的調(diào)用如下：
{*FCK_IMAGE_PATH}是在index.php定義的常量為define(’FCK_IMAGE_PATH’, ‘__PUBLIC__/Js/ckfinder/’);，便于更改路徑。
01 | <script src="__ROOT__/Public/Js/ckeditor/ckeditor.js" type="text/javascript"></script> |
02 | <script src="__ROOT__/Public/Js/ckfinder/ckfinder.js" type="text/javascript"></script> |
03 | <script type="text/javascript"> |
04 | if (typeof CKEDITOR == 'undefined') { |
05 | document.write('加載CKEditor失敗'); |
08 | var editor = CKEDITOR.replace('details'); |
09 | CKFinder.SetupCKEditor(editor, '{*FCK_IMAGE_PATH}'); |
11 | CKEDITOR.config.width = 710; |
12 | CKEDITOR.config.height = 300; |
完整ckeditor+ckfinder打包下載點(diǎn)擊這里
