KindEditor在網站開發中的應用研究

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

關鍵詞： KindEditor； 富文本； 動態網站； 精品課程

中圖分類號：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上各類中小型網站如雨后春筍般涌現，這些網站通常都是動態網站，動態網站通常都會有一個簡單的網站后臺管理系統。后臺管理功能通常有新聞發布，產品發布和商品添加等。而要方便快捷地實現這些功能，通常需要一個在線HTML編輯器。常用的在線HTML編輯器有KindEditor、TinyMCE、FCKEditor、CuteEditor和eWebEditor等。本文以使用最為廣泛的KindEditor為例，探討在線HTML編輯器在網站開發中的應用。

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

1 KindEditor在網站中的使用

要在動態網頁（如asp網頁）中使用KindEditor在線HTML編輯器，需要經過以下幾個步驟。

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

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

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

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

經過上述設置后，傳統多行文本輸入框將會變成一個富文本輸入框。如圖3所示。

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

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

Description=request.form（"Description"）

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

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

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

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

如果要在網頁中創建兩個或多個可視化的富文本輸入框，首先創建多個傳統多行文本輸入框，代碼如下：

以上代碼的作用是創建兩個Kindeditor富文本輸入框替代傳統多行文本輸入框。

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

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

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

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

2 結束語

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

參考文獻：

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

[2] 吳代文，曹熙斌.網站建設與管理基礎及實訓（PHP版）[M].清華大學出版社，2013.

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