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

程序名：KindEditor
6 W- r. L9 N' \  K1 L/ U
版本：2.2
& p" Q% l0 x6 H
演示：http://www.kindsoft.net/editor/demo.html
1 O! Z! L9 Y  ]8 D/ \# W! ]
下載：http://www.kindsoft.net/download/kindeditor-2.2.zip

" b" _" V  t" Q( N: Z% ~+ fKindEditor是基於瀏覽器的簡單的所見即所得(WYSWYG)HTML編輯器，有體積小、文件少、效率高等特點。它是100%用DHTML/JavaScript編寫的，可以很方便地嵌入到ASP,ASP.NET,PHP,JSP等CGI程序裡。
. N$ V) r8 C  c3 P4 ?- E( D
2 e1 i, z  T+ l+ Q  O開發動機：現有的此類編輯器大部分比較大，下載時間長，執行效率低，不太適合應用於訪問量比較大的網站。所以從去年開始一直想開發即滿足常用功能又比較輕巧的HTML編輯器。

最終目標：打造一個功能全、速度快、兼容性好、使用方便的輕量級所見即所得HTML編輯器。
" H$ F. B; V+ K) ^9 r
+ I- H4 L% q: s, J* X應用對像：
$ j6 M- U6 M. \& u1) Web郵件編輯
$ Y' k! z% Z& C2) Blog/新聞文章編輯
8 }: D$ d  [  o& P3) BBS發表文章

特點：
1) 總文件大小較小，節約下載時間。
+ k) K4 u6 U5 [  ?* x: \) F2) 單一JavaScript程序，集成方便。
3) 不用彈出窗口（預覽除外），保證作的流暢性。
0 z  A# {$ R* d6 U" a8 n5 h
3 v9 E4 q/ Y/ m; ^版權：
1)非盈利用戶:免費
2)再發佈用戶、商業用戶:收費
* 非盈利用戶只限於自己使用，不得和其它程序一起發佈。

使用語言：DHTML, JavaScript

4 J6 q$ c; M5 a支持瀏覽器：
- h7 y5 @5 C5 }% ]1 {9 I& M1) Internet Explorer 5.5++
2) Mozilla Firefox 1.0+
1 T+ q; u, l: q% }1 M3) Mozilla 1.3+
; p( G1 i4 T8 ^- I0 R4) NetScape 7+
" O  B7 b& i0 K5) Opera 9+

主要功能：
% ~* J- ~" @2 q" ~* p0 i% t8 H1 x1)源代碼查看/編輯
' x5 o  F1 c% P2)預覽
3 M, m3 p) E+ l1 ?7 p3)打印、回退、前進
4)剪切、複製、粘貼(IE專用)
5)全選
* J) Y  V8 v9 q, ?* }" _$ h! L6)文字的粗體、斜體、下劃線、刪除線
4 y" m( Z/ z  l  C6 m* s' u" j7)左對齊、居中、右對齊、兩端對齊
8)編號、項目符號
9)減少縮進、增加縮進
2 l3 V) [8 R, C10)顯示比例(IE專用)
11)插入層
12)插入表格
13)插入圖片、上傳圖片（上傳默認支持PHP，不過其它CGI也可以使用。）
14)插入Flash
- x# ^) Z% {/ \4 o/ s- Q2 c15)插入視頻
/ q" b( T' s9 @3 k0 f( u  f3 d16)標題、選擇字體、文字大小
17)文字顏色
18)文字背景顏色
19)插入笑臉
. ~& @; F5 c) a8 l+ Q1 T. e$ k20)插入橫線
21)插入特殊字符
1 u! w& ?% h, c6 q  i; O5 E22)超級鏈接創建及取消
, S$ B: H: W6 L23)文字上標和下標
24)插入當前日期、時間
; q* r! _9 N- S" G25)刪除格式
! l; |. e- ^( b5 E. ^& ?
使用說明：

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

1. 把所有文件上傳到服務器上HTTP能訪問的目錄下，例如：http://你的域名/editor/。

/ s, ^- `) J0 H- i% m, H3 R2. 在編輯器目錄下創建attached文件夾，並把權限改成777。

3. 要添加編輯器的地方加入以下代碼。（原來的TEXTAREA或其它編輯器可以先註釋。）
   這裡[]裡的內容要根據你的實際情況修改。
7 ]+ N# z1 M( L5 W5 A  R
4 ~) J" `" g' q2 o8 M: W3 A<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名字]";
$ o( L2 {# O( J! s- o( t, Ieditor.width = "[編輯器寬度,例如：700px]";
; |3 @) K  P) b( a( Qeditor.height = "[編輯器高度,例如：400px]";
editor.show(); //顯示
# f. h. L6 ~) s//提交時獲得最終HTML代碼的函數
, }6 U) }1 Q* y2 Z" t* U, g* B  Sfunction KindSubmit() {
9 b: j2 {% M/ s3 P' `& k        editor.data();
}
</script>

4. FORM的onsubmit屬性裡添加KindSubmit()函數。
6 ?% H) `* [: A) l- E<form name="formname" >
+ N7 p+ M$ p. d. [9 {
% C: Q1 q3 x" N3 e) ]或可以放在提交按鈕的onclick屬性裡。
<input type="button" value="Submit" >
3 A: T6 u: v- D- G
4 {3 N. k0 K! e0 E# Y* 注意：你要編輯的HTML代碼裡的<, >, "這三個字符必須先轉換成&lt;, &gt;, "，否則頁面顯示不正常。
# m9 X; z, z; y! m
( b" w  {/ w0 v+ r二 屬性介紹

8 Z' ]& u" E6 H( \! Y1. hiddenName
% Z4 M6 ]8 x6 V, g7 Y  ?提交時編輯內容的POST參數名

2. width
7 @% a" W- l  [# y' R% b; G( o編輯器寬度
) y) z/ Z" q! I% e: b9 K0 v
3. height
編輯器高度
' M: w6 y# Y6 D& k& [
% g+ c8 b8 T  F3 P9 r" E2 G4. imagePath
7 P! ^6 P7 q8 R- d* z+ B; P) `編輯器images裡的圖片路徑

6 y7 W  k( V0 c5. iconPath
編輯器icons裡的圖片路徑

6. imageAttachPath
" O" a1 j, L, b保存上傳圖片的路徑

$ x) M, I4 {3 c# h  N, n2 \7. imageUploadCgi
5 H1 }+ s7 P" Z, Z上傳圖片的CGI文件路徑

% ]# P5 ^  ]8 b( P( p: b8. menuBorderColor
下拉菜單邊框顏色
' m( ]* m2 V& i( u+ A
9 r! u8 ]3 }5 d, V% `# Y9. menuBgColor
下拉菜單背景顏色

10. menuTextColor
下拉菜單文本顏色

11. menuSelectedColor
6 {' M% W3 W1 U' }5 {下拉菜單選中顏色

12. toolbarBgColor
  ~- w: Q* h$ W) ~玩具欄背景顏色

13. formBorderColor
, J8 S* X9 \& G! J7 O. x/ c編輯框邊框顏色
' k* u! p* @% O, I8 w
) t( \/ g$ z+ i3 n8 y5 Y. s4 a% _14. formBgColor
編輯框背景顏色

三 編寫上傳CGI
  j4 V. X, i' c6 a2 Z: g# B
: S; b+ f9 N3 ^. S/ ^* 上傳圖片時POST參數
7 c6 m8 x' f# P6 P  `1. fileData
3 Z% e2 E1 z" J4 D1 _# h文件FORM的NAME
, S& ?' J, N0 ?5 e0 u. ]
2. fileName
& o; e0 T3 l5 n: l, c+ z7 F9 d3 j修改後的文件名
5 D9 |, O; t' ]
$ i! D' ]) R  q7 d3. imgWidth
圖片寬度

0 l  L$ O1 P5 s( ]4. imgHeight
, x$ @7 _; l$ N; ?; z. X圖片高度

5. imgBorder
圖片邊框

$ I8 Z( N/ u" q* 調用的JavaScript函數
parent.KindInsertImage("[圖片URL]","[圖片寬度]","[圖片高度]","[圖片邊框]");
0 W! L- Y% q) {& N/ |最後上傳成功後執行這個函數插入圖片並關閉下拉菜單。
  h- n9 g7 v& K  D7 Z& I+ ?
- c. r4 O( W1 p* n* 注意點: 文件要上傳到JavaScript裡imageAttachPath指定的目錄裡。

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