唐山網(wǎng)站建設(shè),唐山網(wǎng)站制作,唐山做網(wǎng)站,唐山網(wǎng)頁設(shè)計(jì),唐山網(wǎng)站優(yōu)化,唐山網(wǎng)絡(luò)公司,唐山400電話業(yè)務(wù) 24小時(shí)熱線：15031560143 關(guān)于我們 | 網(wǎng)站模版 | 支付方式 | 網(wǎng)站地圖
第一步：基本配置
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)榘踩颍募豢蔀g覽. 請(qǐng)聯(lián)系系統(tǒng)管理員并檢查CKFinder配置文件“
整合后會(huì)出現(xiàn)“因?yàn)榘踩颍募豢蔀g覽. 請(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)源碼模式，這樣一目了然。