在用 CKEditor 的同時接觸到 KindEditor 風格更時候中國人的編輯習慣,但是各種開源編輯器都需要有一個配置的過程,下面詳細分析一下:
一 簡單使用方法
1. 把所有文件上傳到程序所在目錄下,例如:http://你的域名/editor/。
2. 在此目錄下創建attached文件夾,並把權限改成777。
3. 要添加編輯器的地方加入以下代碼。(原來的TEXTAREA或其它編輯器可以先註釋。)
這裏[]裏的內容要根據你的實際情況修改。
4. FORM的onsubmit屬性裏添加KindSubmit()函數。
或可以放在提交按鈕的onclick屬性裏。
5. 如果KindEditor文件放在其它目錄下,那就需要通過skinPath、iconPath屬性指定圖片、笑臉目錄。
* 使用方法可以參考demo文件。
-----------------------------------------------------------------------
二 屬性介紹
-----------------------------------------------------------------------
1. editorType
simple或full,簡單模式或完全模式
默認值:full
2. safeMode
true或false,安全模式。true時過濾Script腳本。
默認值:false
3. uploadMode
true或false,上傳模式。true時使用上傳功能。
默認值:true
4. hiddenName
提交時編輯內容的POST參數名
默認值:無
5. editorWidth
編輯器寬度
默認值:700px
6. editorHeight
編輯器高度
默認值:400px
7. skinPath
編輯器圖片路徑
默認值:./skins/default/
8. iconPath
編輯器笑臉圖片路徑
默認值:./icons/
9. imageAttachPath
保存上傳圖片的路徑
默認值:./attached/
10. imageUploadCgi
上傳圖片的CGI文件路徑
默認值:./upload_cgi/upload.php
11. menuBorderColor
下拉菜單邊框顏色
默認值:#AAAAAA
12. menuBgColor
下拉菜單背景顏色
默認值:#EFEFEF
13. menuTextColor
下拉菜單文本顏色
默認值:#222222
14. menuSelectedColor
下拉菜單選中顏色
默認值:#DDDDDD
15. toolbarBorderColor
工具欄背景顏色
默認值:#DDDDDD
16. toolbarBgColor
工具欄背景顏色
默認值:#EFEFEF
17. formBorderColor
編輯框邊框顏色
默認值:#DDDDDD
18. formBgColor
編輯框背景顏色
默認值:#FFFFFF
19. buttonColor
按鈕背景顏色
默認值:#AAAAAA
20. cssPath
指定CSS文件路徑
默認值:./common.css
-----------------------------------------------------------------------
三 編寫上傳CGI
-----------------------------------------------------------------------
KindEditor不建議您使用upload_cgi裏自帶的CGI程序,因爲用這個上傳圖片無法進行管理。
建議您圖片原名和更改後名字一起保存到文件或數據庫裏,並按欄目保存在不同的目錄下。
1. Form結構
--------------------------------------
更改後文件名
文件
描述
寬
高
邊
對齊方式
橫隔
豎隔
--------------------------------------
2. 調用的JavaScript函數
parent.KindInsertImage("[圖片URL]","[圖片寬度]","[圖片高度]","[圖片邊框]","[ALT裏的描述]","[圖片對齊方式]","[圖片橫向空白]","[圖片豎向空白]");
最後上傳成功後執行這個函數插入圖片並關閉下拉菜單。
* 注意點: 文件要上傳到JavaScript裏imageAttachPath目錄裏。
parent.KindDisableMenu();
隱藏所有彈出菜單。
parent.KindReloadIframe();
重新裝載圖片彈出菜單。
3. 具體編寫方法請參考upload_cgi裏的程序。
-----------------------------------------------------------------------
四、風格製作方法
-----------------------------------------------------------------------
1. 首先在skins目錄下建立一個目錄。例如: skins/myskin/
2. 把skins/default/目錄下的所有文件複製到自定義風格目錄下。
然後可以一個一個替換,大小可以不同,但名字必須保持一致。
3. 在調用編輯器的地方,通過屬性配置風格路徑和編輯器顏色。
例如:
editor.skinPath = "./skins/myskin/"; //指向剛纔製作好的目錄
editor.menuBorderColor = '#696969';
editor.menuBgColor = '#EFEFDE';
editor.menuTextColor = '#000000';
editor.menuSelectedColor = '#C7C78F';
editor.toolbarBorderColor = '#696969';
editor.toolbarBgColor = '#EFEFDE';
editor.formBorderColor = '#696969';
editor.buttonColor = '#C7C78F';
-----------------------------------------------------------------------
-----------------------------------------------------------------------
五、常見問題
-----------------------------------------------------------------------
1. 怎麼在GB2312編碼下使用KindEditor?
答:本編輯器默認採用UTF-8格式。要改成GB2312格式,用任何帶有編碼轉換功能的編輯器(UltraEdit, EditPlus等)把KindEditor.js文件格式轉換成GB2312就可以。
若使用圖片上傳功能,upload程序也要改成GB2312。
或者包含KindEditor.js時指定charset。
-----------------------------------------------------------------------