第一步：基本配置



CKEditor + CKFinder 配置流水賬：

CKEditor：
1.解壓CKEditor到webRoot目錄，在應(yīng)用頁面加載其ckeditor.js ;
2.頁面textarea：

[html];[/html]

CKFinder：
3.解壓CKFinder到webRoot目錄（最好與CKEditor同級(jí)），在應(yīng)用頁面加載其ckfinder.js ;
4.頁面script：（最好textarea之后）

[javascript]
if (typeof CKEDITOR == ‘undefined’) {
document.write(’加載CKEditor失敗’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder總目錄的相對(duì)路徑.
}
[/javascript]

整合：
（把倆js加載到同一文件其實(shí)就已經(jīng)基本整合好了，還需要修改的配置如下）
5.打開\ckfinder\config.php，修改$baseUrl = ‘（上傳附件的存放路徑）’; //以webRoot為起始的絕對(duì)路徑，其目錄下會(huì)自動(dòng)生成images、flash等子目錄；默認(rèn)是在webRoot的根目錄下，注意修改。

至此配置完畢，如果需要自定義界面，可進(jìn)行以下的高級(jí)修改：

6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定義的配置代碼：

[css]
//字體.

config.font_names = ‘宋體;楷體_GB2312;新宋體;黑體;隸書;幼圓;微軟雅黑;Arial;

Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;’ ;

//工具按鈕.

config.toolbar=

[

['Source','-','Save','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['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','-','About']

];

//寬度

config.width = 500;

//高度

config.height = 400;

//皮膚

config.skin=’v2′;

//等等… …
[/css]

安裝CKFinder后才能有上傳功能:


第二步：設(shè)置CKFinder的上傳功能


由于本次CKEditor全新改版，沒有提供文件上傳功能，所以選擇整合CKFinder是個(gè)不錯(cuò)的選擇
需要修改一下CKEditor插件文件夾下的JS源碼，以image插件為例（Flash及Files同理）：
Code

//將下邊的代碼做一些修改
//{type:'button',id:'browse',align:'center',label:m.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}]}]},
//2009-07-13 將瀏覽服務(wù)器按鈕置為顯示狀態(tài) （hidden: false）,增加onClick函數(shù)，用于打開ckfinder頁面,緊接著上面的代碼添加
{ type: 'button', id: 'browse', align: 'center', label: m.lang.common.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]},


在方法體外增加下邊的函數(shù)
//用于取回 ckfinder 返回的圖片地址并對(duì)路徑文本框和預(yù)覽圖片進(jìn)行賦值
function SetFileField(fileUrl)
{
   //獲取主Div下的所有文本框控件
    var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
    for(var i=0; i     {
        if(inputStr[i].type=="text")
        {
            //第一個(gè)輸入框控件是圖像路徑，得到ID，設(shè)置新的圖片路徑
            CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
            break ;
        }
    }
    CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));
}


第三步：CKFINDER上傳問題：出現(xiàn)“因?yàn)榘踩�原因，文件不可瀏覽. 請(qǐng)聯(lián)系系統(tǒng)管理員并檢查CKFinder配置文件“


整合后會(huì)出現(xiàn)“因?yàn)榘踩�原因，文件不可瀏覽. 請(qǐng)聯(lián)系系統(tǒng)管理員并檢查CKFinder配置文件“

The Solution:

1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
對(duì)于目標(biāo)文件夾$baseUrl = '/userfiles/';沒有寫入權(quán)限

2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因?yàn)槌鲇诎踩�考慮ckfinder/config.php文件中的CheckAuthentication()函數(shù)默認(rèn)返回值是false, 需要手動(dòng)修改驗(yàn)證條件, 不建議直接返回true

ckeditor中默認(rèn)添加p標(biāo)簽。很煩人。

解決方法如下：

在ckeditor文件下config.js中加

config.shiftEnterMode = CKEDITOR.ENTER_P;

就行了

config.enterMode = CKEDITOR.ENTER_BR;

是屏蔽br標(biāo)簽的�；剀嚂�(huì)產(chǎn)生br標(biāo)簽

config.startupMode = 'source';

默認(rèn)進(jìn)入源碼模式，用來處理html文件不錯(cuò)，我自己設(shè)置了默認(rèn)源碼模式，這樣一目了然。