所見即所得HTML編輯器 - KindEditor 2.4

所見即所得HTML編輯器 - KindEditor 2.4

程序名：KindEditor

版本：2.4

演示： [url]http://www.kindsoft.net/editor/demo.html[/url]

下載： [url]http://www.kindsoft.net/download/kindeditor-2.4.zip[/url]



KindEditor是基於瀏覽器的簡單的所見即所得(WYSWYG)HTML編輯器，有體積小、文件少、效率高等特色。它是100%用DHTML/JavaScript編寫的，能夠很方便地嵌入到ASP,ASP.NET,PHP,JSP等CGI程序裏。

版權：
1)非商業用戶：免費
2)商業用戶：收費
* 要了解詳情請參考壓縮包裏的LICENCE.txt或 [url]http://www.kindsoft.net/buy.php[/url] 。

使用語言：DHTML, JavaScript

支持瀏覽器：
1) Internet Explorer 5.5++
2) Mozilla Firefox 1.0+
3) Mozilla 1.3+
4) NetScape 7+
5) Opera 9+

應用對象：
1) Web郵件編輯
2) Blog/新聞文章編輯
3) BBS發表文章

特色：
1) 總文件大小較小，節約下載時間。
2) 單一JavaScript程序，集成方便。
3) 不用彈出窗口（預覽除外），保證操做的流暢性。

主要功能：
1)源代碼查看/編輯
2)預覽
3)打印、回退、前進
4)剪切、複製、粘貼(IE專用)
5)全選
6)文字的粗體、斜體、下劃線、刪除線
7)左對齊、居中、右對齊、兩端對齊
8)編號、項目符號
9)減小縮進、增長縮進
10)顯示比例(IE專用)
11)插入層
12)插入表格
13)插入圖片、上傳圖片（上傳默認支持PHP和ASP）
14)插入Flash
15)插入視頻
16)標題、選擇字體、文字大小
17)文字顏色
18)文字背景顏色
19)插入笑臉
20)插入橫線
21)插入特殊字符
22)超級連接建立及取消
23)文字上標和下標
24)插入當前日期、時間
25)刪除格式

和2.3相比變動的地方有：

1. 增長了RealPlayer插入功能。
2. 增長了ASP上傳程序。(須要ABCUpload組件)
3. 增長了圖片增長對齊、間隔、描述設置。
4. 增長了Script過濾選擇屬性。
5. 增長了圖片上傳選擇屬性。
6. 增長了兩端對齊。
7. 修改了先選擇[字體、大小、顏色等]後再輸入會無效的問題。
8. 修改了有些動做沒法撤消的問題。
9. 修改了插入視頻,鏈接,FLASH等等焦點默認不在提交按鈕上的問題。
10. 修改了簡單模式下沒法提交內容的問題。
11. 取消層的默認寬度和高度。
12. 設置域名後本地圖片時地址改爲相對URL。
13. 增長了upload_cgi目錄，存放CGI程序。

#############################################
#
# KindEditor 2.4 使用方法
#
#############################################

一 簡單使用方法

1. 把全部文件上傳到程序所在目錄下，例如：http://你的域名/editor/。

2. 在此目錄下建立attached文件夾，並把權限改爲777。

3. 要添加編輯器的地方加入如下代碼。（原來的TEXTAREA或其它編輯器能夠先註釋。）
   這裏[]裏的內容要根據你的實際狀況修改。
-----------------------------------------------------------------------
<input type="hidden" name="[原TEXTAREA名字]" value="[這裏放你要編輯的內容]">
<script type="text/javascript" src="[JS路徑]/KindEditor.js"></script>
<script type="text/javascript">
var editor = new KindEditor("editor"); //建立編輯器對象
editor.hiddenName = "[原TEXTAREA名字]";
editor.editorWidth = "[編輯器寬度,例如：700px]";
editor.editorHeight = "[編輯器高度,例如：400px]";
editor.show(); //顯示
//提交時得到最終HTML代碼的函數
function KindSubmit() {
        editor.data();
}
</script>
-----------------------------------------------------------------------

4. FORM的onsubmit屬性裏添加KindSubmit()函數。
<form name="formname" >
或能夠放在提交按鈕的onclick屬性裏。
<input type="button" value="Submit" >

5. 若是KindEditor文件放在其它目錄下，那就須要經過skinPath、iconPath屬性指定圖片、笑臉目錄。

* 使用方法能夠參考demo文件。

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

二 屬性介紹
-----------------------------------------------------------------------
1. siteDomain
網站域名，這個域名下的圖片改爲相對路徑。 默認值：無 例：wwww.kindsoft.net 2. editorType simple或full，簡單模式或徹底模式 默認值：full 3. safeMode true或false，安全模式。true時過濾腳本和事件屬性。 默認值：false 4. uploadMode true或false，上傳模式。true時使用上傳功能。 默認值：true 5. hiddenName 提交時編輯內容的POST參數名 默認值：無 6. editorWidth 編輯器寬度 默認值：700px 7. editorHeight 編輯器高度 默認值：400px 8. skinPath 編輯器圖片路徑 默認值：skins/default/ 9. iconPath 編輯器笑臉圖片路徑 默認值：icons/ 10. p_w_picpathAttachPath 保存上傳圖片的路徑 默認值：attached/ 11. p_w_picpathUploadCgi 上傳圖片的CGI文件路徑 默認值：./upload_cgi/upload.php 12. menuBorderColor 下拉菜單邊框顏色 默認值：#AAAAAA 13. menuBgColor 下拉菜單背景顏色 默認值：#EFEFEF 14. menuTextColor 下拉菜單文本顏色 默認值：#222222 15. menuSelectedColor 下拉菜單選中顏色 默認值：#DDDDDD 16. toolbarBorderColor 工具欄背景顏色 默認值：#DDDDDD 17. toolbarBgColor 工具欄背景顏色 默認值：#EFEFEF 18. formBorderColor 編輯框邊框顏色 默認值：#DDDDDD 19. formBgColor 編輯框背景顏色 默認值：#FFFFFF 20. buttonColor 按鈕背景顏色 默認值：#AAAAAA ----------------------------------------------------------------------- 屬性例子： ----------------------------------------------------------------------- <input type="hidden" name="content" value="[這裏放你要編輯的內容]"> <script type="text/javascript" src="./KindEditor.js"></script> <script type="text/javascript"> var editor = new KindEditor("editor"); editor.siteDomain = "www.kindsoft.net"; editor.safeMode = true; // true 或 false editor.uploadMode = true; // true 或 false editor.hiddenName = "content"; //上面hidden的名字 editor.p_w_picpathUploadCgi = "./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(); //把編輯器的內容放在content隱藏Form裏。 } </script> ----------------------------------------------------------------------- 三 編寫圖片上傳CGI ----------------------------------------------------------------------- KindEditor不建議您使用upload_cgi裏自帶的CGI程序，由於用這個上傳圖片沒法進行管理。 建議您圖片原名和更改後名字一塊兒保存到文件或數據庫裏，並按欄目保存在不一樣的目錄下。 1. Form結構 -------------------------------------- <form name="uploadForm" method="post" enctype="multipart/form-data" action="[p_w_picpathUploadCgi指定的處理程序]"> 更改後文件名<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. 調用的JavaScript函數 parent.KindInsertImage("[圖片URL]","[圖片寬度]","[圖片高度]","[圖片邊框]","[ALT裏的描述]","[圖片對齊方式]","[圖片橫向空白]","[圖片豎向空白]"); 最後上傳成功後執行這個函數插入圖片並關閉下拉菜單。 * 注意點: 文件要上傳到JavaScript裏p_w_picpathAttachPath目錄裏。 parent.KindDisableMenu(); 隱藏全部彈出菜單。 parent.KindReloadIframe(); 從新裝載圖片彈出菜單。 3. 具體編寫方法請參考upload_cgi裏的程序。 ----------------------------------------------------------------------- 4、風格製做方法 ----------------------------------------------------------------------- 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'; ----------------------------------------------------------------------- ----------------------------------------------------------------------- 5、常見問題 ----------------------------------------------------------------------- 1. 怎麼在GB2312編碼下使用KindEditor？ 答：本編輯器默認採用UTF-8格式。要改爲GB2312格式，用任何帶有編碼轉換功能的編輯器（UltraEdit, EditPlus等）把KindEditor.js文件自己格式轉換成GB2312就能夠。 若使用圖片上傳功能，upload程序也要改爲GB2312。 -----------------------------------------------------------------------