KindEditor 配置和常見問題

    在用 CKEditor 的同時接觸到 KindEditor 風格更時候中國人的編輯習慣,但是各種開源編輯器都需要有一個配置的過程,下面詳細分析一下:


KindEditor <wbr>配置和常見問題

一 簡單使用方法

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。

-----------------------------------------------------------------------

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章