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

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

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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)站通常都是動(dòng)態(tài)網(wǎng)站，動(dòng)態(tài)網(wǎng)站通常都會(huì)有一個(gè)簡(jiǎn)單的網(wǎng)站后臺(tái)管理系統(tǒng)。后臺(tái)管理功能通常有新聞發(fā)布，產(chǎn)品發(fā)布和商品添加等。而要方便快捷地實(shí)現(xiàn)這些功能，通常需要一個(gè)在線HTML編輯器。常用的在線HTML編輯器有KindEditor、TinyMCE、FCKEditor、CuteEditor和eWebEditor等。本文以使用最為廣泛的KindEditor為例，探討在線HTML編輯器在網(wǎng)站開發(fā)中的應(yīng)用。

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

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

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

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

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

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

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

經(jīng)過(guò)上述設(shè)置后，傳統(tǒng)多行文本輸入框?qū)?huì)變成一個(gè)富文本輸入框。如圖3所示。

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

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

Description=request.form（"Description"）

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

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

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

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

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

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

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

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

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

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

2 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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