第一步：基本配置
CKEditor + CKFinder 配置流水賬：
CKEditor：
1.解壓CKEditor到webRoot目錄，在應用頁面加載其ckeditor.js ;
2.頁面textarea：
[html];[/html]
CKFinder：
3.解壓CKFinder到webRoot目錄（最好與CKEditor同級），在應用頁面加載其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總目錄的相對路徑.
}
[/javascript]
整合：
（把倆js加載到同一文件其實就已經基本整合好了，還需要修改的配置如下）
5.打開\ckfinder\config.php，修改$baseUrl = ‘（上傳附件的存放路徑）’; //以webRoot為起始的絕對路徑，其目錄下會自動生成images、flash等子目錄；默認是在webRoot的根目錄下，注意修改。
至此配置完畢，如果需要自定義界面，可進行以下的高級修改：
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后才能有上傳功能:
第二步：設置CKFinder的上傳功能
由于本次CKEditor全新改版，沒有提供文件上傳功能，所以選擇整合CKFinder是個不錯的選擇
需要修改一下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 將瀏覽服務器按鈕置為顯示狀態 （hidden: false）,增加onClick函數，用于打開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(); } }]}]},
在方法體外增加下邊的函數
//用于取回 ckfinder 返回的圖片地址并對路徑文本框和預覽圖片進行賦值
function SetFileField(fileUrl)
{
//獲取主Div下的所有文本框控件
var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
for(var i=0; i
if(inputStr[i].type=="text")
{
//第一個輸入框控件是圖像路徑，得到ID，設置新的圖片路徑
CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
break ;
}
}
CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));
}
第三步：CKFINDER上傳問題：出現“因為安全原因，文件不可瀏覽. 請聯系系統管理員并檢查CKFinder配置文件“
整合后會出現“因為安全原因，文件不可瀏覽. 請聯系系統管理員并檢查CKFinder配置文件“
The Solution:
1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
對于目標文件夾$baseUrl = '/userfiles/';沒有寫入權限
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.
因為出于安全考慮ckfinder/config.php文件中的CheckAuthentication()函數默認返回值是false, 需要手動修改驗證條件, 不建議直接返回true
ckeditor中默認添加p標簽。很煩人。
解決方法如下：
在ckeditor文件下config.js中加
config.shiftEnterMode = CKEDITOR.ENTER_P;
就行了
config.enterMode = CKEDITOR.ENTER_BR;
是屏蔽br標簽的。回車會產生br標簽
config.startupMode = 'source';
默認進入源碼模式，用來處理html文件不錯，我自己設置了默認源碼模式，這樣一目了然。