一 簡單使用方法
1.把所有文件上傳到程序所在目錄下,例如:http://你的域名/editor/。
2.在此目錄下創(chuàng)建attached文件夾,并把權(quán)限改成777。
3.要添加編輯器的地方加入以下代碼。(原來的TEXTAREA或其它編輯器可以先注釋。)
這里[]里的內(nèi)容要根據(jù)你的實際情況修改。
-----------------------------------------------------------------------
<input type="hidden" name="[原TEXTAREA名字]"value="[這里放你要編輯的內(nèi)容]">
<script type="text/javascript" charset="utf-8"src="[JS路徑]/KindEditor.js"></script>
<script type="text/javascript">
var editor = new KindEditor("editor"); //創(chuàng)建編輯器對象
editor.hiddenName = "[原TEXTAREA名字]";
editor.editorWidth = "[編輯器寬度,例如:700px]";
editor.editorHeight = "[編輯器高度,例如:400px]";
editor.show(); //顯示
//提交時獲得最終HTML代碼的函數(shù)
function KindSubmit() {
editor.data();
}
</script>
-----------------------------------------------------------------------
4.FORM的onsubmit屬性里添加KindSubmit()函數(shù)。
<form name="formname"onsubmit="javascript:KindSubmit();">
或可以放在提交按鈕的onclick屬性里。
<input type="button" value="Submit"onclick="javascript:KindSubmit();">
5.如果KindEditor文件放在其它目錄下,那就需要通過skinPath、iconPath屬性指定圖片、笑臉目錄。
* 使用方法可以參考demo文件。
-----------------------------------------------------------------------
二 屬性介紹
-----------------------------------------------------------------------
1. editorType
simple或full,簡單模式或完全模式
默認(rèn)值:full
2. safeMode
true或false,安全模式。true時過濾Script腳本。
默認(rèn)值:false
3. uploadMode
true或false,上傳模式。true時使用上傳功能。
默認(rèn)值:true
4. hiddenName
提交時編輯內(nèi)容的POST參數(shù)名
默認(rèn)值:無
5. editorWidth
編輯器寬度
默認(rèn)值:700px
6. editorHeight
編輯器高度
默認(rèn)值:400px
7. skinPath
編輯器圖片路徑
默認(rèn)值:./skins/default/
8. iconPath
編輯器笑臉圖片路徑
默認(rèn)值:./icons/
9. imageAttachPath
保存上傳圖片的路徑
默認(rèn)值:./attached/
10. imageUploadCgi
上傳圖片的CGI文件路徑
默認(rèn)值:./upload_cgi/upload.php
11. menuBorderColor
下拉菜單邊框顏色
默認(rèn)值:#AAAAAA
12. menuBgColor
下拉菜單背景顏色
默認(rèn)值:#EFEFEF
13. menuTextColor
下拉菜單文本顏色
默認(rèn)值:#222222
14. menuSelectedColor
下拉菜單選中顏色
默認(rèn)值:#DDDDDD
15. toolbarBorderColor
工具欄背景顏色
默認(rèn)值:#DDDDDD
16. toolbarBgColor
工具欄背景顏色
默認(rèn)值:#EFEFEF
17. formBorderColor
編輯框邊框顏色
默認(rèn)值:#DDDDDD
18. formBgColor
編輯框背景顏色
默認(rèn)值:#FFFFFF
19. buttonColor
按鈕背景顏色
默認(rèn)值:#AAAAAA
20. cssPath
指定CSS文件路徑
默認(rèn)值:./common.css
-----------------------------------------------------------------------
屬性例子:
-----------------------------------------------------------------------
<input type="hidden" name="content"value="[這里放你要編輯的內(nèi)容]">
<script type="text/javascript"src="./KindEditor.js"></script>
<script type="text/javascript">
var editor = new KindEditor("editor");
editor.safeMode = true; // true 或 false
editor.uploadMode = true; // true 或 false
editor.hiddenName = "content"; //上面hidden的名字
editor.imageUploadCgi = "./upload_cgi/upload.php";//圖片上傳CGI程序
editor.editorType = "simple"; // simple 或 full
editor.skinPath = "./skins/fck/"; //編輯器圖片目錄
editor.editorWidth = "700px"; //寬度
editor.editorHeight = "400px"; //高度
editor.menuBorderColor = '#696969';
editor.menuBgColor = '#EFEFDE';
editor.menuTextColor = '#000000';
editor.menuSelectedColor = '#C7C78F';
editor.toolbarBorderColor = '#696969';
editor.toolbarBgColor = '#EFEFDE';
editor.formBorderColor = '#696969';
editor.buttonColor = '#C7C78F';
editor.show();
function KindSubmit() {
editor.data();//把編輯器的內(nèi)容放在content隱藏Form里。
}
</script>
-----------------------------------------------------------------------
三 編寫上傳CGI
-----------------------------------------------------------------------
KindEditor不建議您使用upload_cgi里自帶的CGI程序,因為用這個上傳圖片無法進(jìn)行管理。
建議您圖片原名和更改后名字一起保存到文件或數(shù)據(jù)庫里,并按欄目保存在不同的目錄下。
1. Form結(jié)構(gòu)
--------------------------------------
<form name="uploadForm" method="post"enctype="multipart/form-data"action="[imageUploadCgi指定的處理程序]">
更改后文件名<input type="hidden" name="fileName"value="">
文件<input type="file" name="fileData">
描述<input type="text" name="imgTitle" value="">
寬<input type="text" name="imgWidth" value="">
高<input type="text" name="imgHeight" value="">
邊<input type="text" name="imgBorder" value="">
<select name="imgAlign">
<option value="">對齊方式</option>
</select>
橫隔<input type="text" name="imgHspace" value="">
豎隔<input type="text" name="imgVspace" value="">
<input type="submit" name="button" value="確定">
</form>
--------------------------------------
2. 調(diào)用的JavaScript函數(shù)
parent.KindInsertImage("[圖片URL]","[圖片寬度]","[圖片高度]","[圖片邊框]","[ALT里的描述]","[圖片對齊方式]","[圖片橫向空白]","[圖片豎向空白]");
最后上傳成功后執(zhí)行這個函數(shù)插入圖片并關(guān)閉下拉菜單。
* 注意點:文件要上傳到JavaScript里imageAttachPath目錄里。
parent.KindDisableMenu();
隱藏所有彈出菜單。
parent.KindReloadIframe();
重新裝載圖片彈出菜單。
3.具體編寫方法請參考upload_cgi里的程序。
-----------------------------------------------------------------------
四、風(fēng)格制作方法
-----------------------------------------------------------------------
1. 首先在skins目錄下建立一個目錄。例如: skins/myskin/
2.把skins/default/目錄下的所有文件復(fù)制到自定義風(fēng)格目錄下。
然后可以一個一個替換,大小可以不同,但名字必須保持一致。
3.在調(diào)用編輯器的地方,通過屬性配置風(fēng)格路徑和編輯器顏色。
例如:
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?
答:本編輯器默認(rèn)采用UTF-8格式。要改成GB2312格式,用任何帶有編碼轉(zhuǎn)換功能的編輯器(UltraEdit,EditPlus等)把KindEditor.js文件格式轉(zhuǎn)換成GB2312就可以。
若使用圖片上傳功能,upload程序也要改成GB2312。
或者包含KindEditor.js時指定charset。
<script type="text/javascript" charset="utf-8"src="[JS路徑]/KindEditor.js"></script>
-----------------------------------------------------------------------
愛華網(wǎng)



