摘 要： KindEditor是一套開源的在線HTML編輯器，網(wǎng)站開發(fā)人員可以用KindEditor把傳統(tǒng)的多行文本輸入框替換為可視化的富文本輸入框，從而讓網(wǎng)站用戶獲得所見即所得編輯效果。KindEditor功能齊全，使用簡單，具有很強的可擴展性，而且能夠兼容各種主流瀏覽器。KindEditor可用于動態(tài)網(wǎng)站和精品課程開發(fā)制作中，利用KindEditor的富媒體性，可輕松實現(xiàn)文本編輯以及視頻、音頻、圖片和附件等資料的上傳管理。

關(guān)鍵詞： KindEditor； 富文本； 動態(tài)網(wǎng)站； 精品課程

中圖分類號：TP37 文獻標志碼：A 文章編號：1006-8228（2015）09-45-02

Study on application of KindEditor in Web site development

Wu Daiwen

（College of Media Engineering， Weinan Normal University， Weinan， Shanxi 714000， China）

Abstract： Kindeditor is an open source online HTML editor， Web developers can use KindEditor to replace the traditional multi-line text input box with the visualized rich text input box， so that the site users get the wysiwyg editing effect. KindEditor features complete， easy to use， with a strong scalability， and can be compatible with all kinds of mainstream browsers. Kindeditor can be used to develop the dynamic Web-sites and the excellent courses， using the rich media features of kindeditor， the text editing and the upload management for video， audio， images and accessories can be easily realized.

Key words： KindEditor； rich text； dynamic Web-sites； excellent courses

0 引言

目前，Internet上各類中小型網(wǎng)站如雨后春筍般涌現(xiàn)，這些網(wǎng)站通常都是動態(tài)網(wǎng)站，動態(tài)網(wǎng)站通常都會有一個簡單的網(wǎng)站后臺管理系統(tǒng)。后臺管理功能通常有新聞發(fā)布，產(chǎn)品發(fā)布和商品添加等。而要方便快捷地實現(xiàn)這些功能，通常需要一個在線HTML編輯器。常用的在線HTML編輯器有KindEditor、TinyMCE、FCKEditor、CuteEditor和eWebEditor等。本文以使用最為廣泛的KindEditor為例，探討在線HTML編輯器在網(wǎng)站開發(fā)中的應用。

KindEditor是一套開源的在線HTML編輯器，主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果，開發(fā)人員可以用KindEditor把傳統(tǒng)的多行文本輸入框（textarea）替換為可視化的富文本輸入框[1]。

1 KindEditor在網(wǎng)站中的使用

要在動態(tài)網(wǎng)頁（如asp網(wǎng)頁）中使用KindEditor在線HTML編輯器，需要經(jīng)過以下幾個步驟。

⑴ 到http：//kindeditor.net/網(wǎng)站下載KindEditor在線HTML編輯器。將下載的壓縮包解壓后如圖1所示。KindEditor目前支持asp、jsp、asp.net和jsp等動態(tài)網(wǎng)頁技術(shù)，因此可以在這四種動態(tài)網(wǎng)頁中集成KindEditor在線HTML編輯器。

⑶ 在網(wǎng)頁的表單中設(shè)計一個多行文本輸入框，這里注意要將多行文本輸入框的visibility屬性設(shè)置為“hidden”，多行文本框代碼如下[3]：

多行文本輸入框的name屬性值（Description）應該出現(xiàn)在步驟⑵的以下代碼行中。

這樣設(shè)置的目的是用KindEditor富文本輸入框取代傳統(tǒng)的多行文本輸入框，傳統(tǒng)多行文本輸入框如圖2所示。

經(jīng)過上述設(shè)置后，傳統(tǒng)多行文本輸入框?qū)兂梢粋€富文本輸入框。如圖3所示。

比較圖2和圖3就可以看出，圖3的富文本輸入框比圖2的傳統(tǒng)多行文本輸入框多了很多實用的工具，這些工具可修改文本格式，上傳圖片、視頻和附件等。

如果要在處理表單的asp頁面獲取該KindEditor富文本輸入框中的內(nèi)容，使用以下語句即可：

Description=request.form（"Description"）

KindEditor會將圖片、視頻和附件等資料上傳到圖1的“attached”目錄下相應子目錄，通過以上語句獲得的內(nèi)容通常是一段HTML代碼，要在Access數(shù)據(jù)庫中存儲這段HTML代碼，可以用一個數(shù)據(jù)類型為“備注”的字段即可。

⑷ 圖3所顯示的在線HTML編輯工具可以由用戶定制，定制方法比較簡單，打開kindeditor根目錄下的kindeditor.js文件，找到如下代碼段。

用戶可以在該代碼段中定制在線HTML編輯器的工具，只需把不想要的工具刪除即可。'/'符號表示換行，其他工具基本可以做到見名知意。如果將上面代碼段刪減為以下代碼段，則得到的富文本輸入框的效果如圖4所示。

圖3所展示的富文本輸入框通常用于網(wǎng)站后臺，因為網(wǎng)站后臺管理員通常需要插入flash動畫、視頻和附件等內(nèi)容。圖4所展示的富文本輸入框通常用于網(wǎng)站前臺，網(wǎng)站前臺留給用戶的功能應該要少一些。通常主要是一些文本格式、圖片和表情工具等。

如果要在網(wǎng)頁中創(chuàng)建兩個或多個可視化的富文本輸入框，首先創(chuàng)建多個傳統(tǒng)多行文本輸入框，代碼如下：

以上代碼的作用是創(chuàng)建兩個Kindeditor富文本輸入框替代傳統(tǒng)多行文本輸入框。

⑸ Kindeditor可上傳的資源有圖片、flash、媒體和其他附件。這些文件的格式在kindeditor中都可以指定，如果還需要上傳某些特殊格式的文件，可以對kindeditor中指定的文件格式進行修改。另外，kindeditor中對上傳文件的最大尺寸做了限制，這個限制也可以修改。修改方法比較簡單，找到kindeditor根目錄下的asp子文件，找到upload_json.asp文件并打開，找到如下代碼段。

用戶可以在這段代碼中設(shè)定要上傳的文件格式和最大文件大小。修改方法比較簡單，如果需要在網(wǎng)站中上傳bmp格式的圖片，可將第一行代碼改為：

imageExtStr="gif|jpg|jpeg|png|bmp"

其他代碼的修改方式與此基本一致，讀者可自行修改。

2 結(jié)束語

KindEditor是一套開源的在線HTML編輯器，它功能齊全，使用簡單，具有很強的可擴展性，而且能夠兼容各種主流瀏覽器。KindEditor可廣泛用于動態(tài)網(wǎng)站和精品課程開發(fā)， KindEditor發(fā)布的信息可以插入視頻、音頻、圖片和附件等資源，因此KindEditor發(fā)布的信息更加具有多媒體性。但KindEditor也有一些缺陷，比如KindEditor發(fā)布的多媒體信息在刪除后，信息中包含的視頻、音頻、圖片和附件等資源沒有同時被刪除，仍然留在服務(wù)器中。這些沒有被刪除的資源會白白浪費服務(wù)器存儲空間并影響網(wǎng)站訪問速度。這是KindEditor下一步應該繼續(xù)修改和完善的地方。

參考文獻：

[1] KindEditor是什么？[EB/OL]http：//kindeditor.net/about.php.

[2] 吳代文，曹熙斌.網(wǎng)站建設(shè)與管理基礎(chǔ)及實訓（PHP版）[M].清華大學出版社，2013.

[3] 吳代文，郭軍軍.網(wǎng)站建設(shè)與管理基礎(chǔ)及實訓（ASP版）（第二版）[M].清華大學出版社，2015.