所見即所得(WYSWYG)HTML編輯器 - KindEditor 2.2

顯示全部樓層 · 發表於 2006-8-8 17:40:13

程序名：KindEditor

版本：2.2

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

下載：http://www.kindsoft.net/download/kindeditor-2.2.zip

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

開發動機：現有的此類編輯器大部分比較大，下載時間長，執行效率低，不太適合應用於訪問量比較大的網站。所以從去年開始一直想開發即滿足常用功能又比較輕巧的HTML編輯器。

最終目標：打造一個功能全、速度快、兼容性好、使用方便的輕量級所見即所得HTML編輯器。

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

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

版權：
1)非盈利用戶:免費
2)再發佈用戶、商業用戶:收費
* 非盈利用戶只限於自己使用，不得和其它程序一起發佈。

使用語言：DHTML, JavaScript

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

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

使用說明：

一默認使用（服務器需要支持PHP）

1. 把所有文件上傳到服務器上HTTP能訪問的目錄下，例如：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.width = "[編輯器寬度,例如：700px]";
editor.height = "[編輯器高度,例如：400px]";
editor.show(); //顯示
//提交時獲得最終HTML代碼的函數
function KindSubmit() {
editor.data();
}
</script>

4. FORM的onsubmit屬性裡添加KindSubmit()函數。
<form name="formname" >

或可以放在提交按鈕的onclick屬性裡。
<input type="button" value="Submit" >

* 注意：你要編輯的HTML代碼裡的<, >, "這三個字符必須先轉換成<, >, "，否則頁面顯示不正常。

二屬性介紹

1. hiddenName
提交時編輯內容的POST參數名

2. width
編輯器寬度

3. height
編輯器高度

4. imagePath
編輯器images裡的圖片路徑

5. iconPath
編輯器icons裡的圖片路徑

6. imageAttachPath
保存上傳圖片的路徑

7. imageUploadCgi
上傳圖片的CGI文件路徑

8. menuBorderColor
下拉菜單邊框顏色

9. menuBgColor
下拉菜單背景顏色

10. menuTextColor
下拉菜單文本顏色

11. menuSelectedColor
下拉菜單選中顏色

12. toolbarBgColor
玩具欄背景顏色

13. formBorderColor
編輯框邊框顏色

14. formBgColor
編輯框背景顏色

三編寫上傳CGI

* 上傳圖片時POST參數
1. fileData
文件FORM的NAME

2. fileName
修改後的文件名

3. imgWidth
圖片寬度

4. imgHeight
圖片高度

5. imgBorder
圖片邊框

* 調用的JavaScript函數
parent.KindInsertImage("[圖片URL]","[圖片寬度]","[圖片高度]","[圖片邊框]");
最後上傳成功後執行這個函數插入圖片並關閉下拉菜單。

* 注意點: 文件要上傳到JavaScript裡imageAttachPath指定的目錄裡。

有任何疑問或Bug，請回復本貼，或在 http://www.kindsoft.net 上留言。

		自動登錄	找回密碼
密碼			免费注册

所見即所得(WYSWYG)HTML編輯器 - KindEditor 2.2

相關帖子