HTML編輯器在JAVA WEB下的應(yīng)用研究

童瑩

摘 要：本文介紹了HTML編輯器的基本功能，分析了它的基本原理及基本調(diào)用方式。通過(guò)對(duì)不同原理的HTML編輯器的分析，剖析其各自所具有的優(yōu)缺點(diǎn)。最后闡述了目前常用的HTML編輯器KindEditor在JAVA WEB下應(yīng)用的具體步驟。

關(guān)鍵詞：html編輯器；KindEditor；JAVA

1 引言

在WEB應(yīng)用開(kāi)發(fā)中，完成與用戶交互最主要的方式是用戶信息的提交、反饋和言論的發(fā)布、交流。隨著網(wǎng)頁(yè)交互更注重用戶體驗(yàn)，發(fā)布信息的內(nèi)容不再僅只是簡(jiǎn)單的文字，而是擁有個(gè)性化表情、圖片、以及各種格式文本的信息。傳統(tǒng)HTML表單輸入元素已經(jīng)遠(yuǎn)遠(yuǎn)不能滿足用戶富文本的編輯需求。在編輯信息的同時(shí)，WEB應(yīng)用程序需要對(duì)用戶填寫(xiě)的數(shù)據(jù)進(jìn)行格式轉(zhuǎn)換，才能讓用戶將所發(fā)布的信息以其所期望的效果顯示在Web頁(yè)面上。

HTML編輯器就是用來(lái)依據(jù)用戶需求來(lái)編輯網(wǎng)頁(yè)元素顯示效果的工具，編輯的內(nèi)容是基于HTML的文檔。因其可用于編輯基于HTML的文檔，所以經(jīng)常被應(yīng)用到諸如：網(wǎng)站留言板、論壇發(fā)貼、博客日志的編寫(xiě)、網(wǎng)站后臺(tái)信息管理等需要用戶輸入富文本信息的地方，是當(dāng)前Web交互式應(yīng)用的常用模塊之一。

2 HTML編輯器的基本原理

HTML編輯器是用來(lái)編輯基于HTML的文檔，也就是網(wǎng)頁(yè)文檔。了解HTML編輯器，就需要了解基本的網(wǎng)頁(yè)文件。

2.1 網(wǎng)頁(yè)的基本原理

網(wǎng)頁(yè)其實(shí)就是一個(gè)文本文件，它是滿足HTML標(biāo)記規(guī)范的文檔。一個(gè)網(wǎng)頁(yè)中，可以包含文本、表格、圖片等組成元素，而網(wǎng)頁(yè)中的HTML標(biāo)記用來(lái)向?yàn)g覽器說(shuō)明在屏幕上顯示時(shí)，這些組成元素應(yīng)該是什么樣的格式和效果。HTML即“超文本標(biāo)記語(yǔ)言”，它是一種計(jì)算機(jī)語(yǔ)言，說(shuō)明如何格式化頁(yè)面。以文本加粗為例，需要利用HTML標(biāo)記，具體表示如下：

這是粗體

2.2 HTML編輯器的基本原理

HTML編輯器在WEB系統(tǒng)中應(yīng)用普遍，當(dāng)前有很多開(kāi)發(fā)工具用于實(shí)現(xiàn)用戶富文本的交互，從實(shí)現(xiàn)效果上來(lái)區(qū)分，分為“非所見(jiàn)即所得”和“所見(jiàn)即所得”兩種。這兩種HTML編輯器實(shí)現(xiàn)原理有所區(qū)別：

2.2.1 非所見(jiàn)即所得

“非所見(jiàn)即所得”HTML編輯器，是指用戶在輸入信息時(shí)，可以指定顯示效果，但不能即刻通過(guò)輸入看到所處理生成的結(jié)果。這種編輯器主要是利用HTML的textarea元素。 標(biāo)簽是用來(lái)定義多行文本輸入的控件。</p><p>要實(shí)現(xiàn)粗體、斜體、下劃線、顏色字、圖片的效果時(shí)，只需在文字的中間加上自定義標(biāo)簽即可，例如：</p><p>[b]文本編輯器[b] ，[img]src=”http：//www.google.com.hk/ images/logo_cn.png”[img]</p><p>這些規(guī)則開(kāi)發(fā)時(shí)通過(guò)js腳本進(jìn)行定制。當(dāng)表單POST提交后，再把這些標(biāo)簽轉(zhuǎn)換為html標(biāo)簽。</p><p>這種HTML編輯器的優(yōu)點(diǎn)是速度快，提交方便，缺點(diǎn)是不直觀，功能非常少。</p><p>2.2.2 所見(jiàn)即所得</p><p>利用textarea元素?zé)o法實(shí)現(xiàn)“立竿見(jiàn)影”的顯示效果，而文本域本身也只是支持一些字符的輸入，并不支持顯示html，在顯示上功能很少。目前應(yīng)用廣泛的是“所見(jiàn)即所得”的HTML編輯器，要實(shí)現(xiàn)這個(gè)功能，可以利用DIV或者TABLE的CONTENTEDITABLE 標(biāo)簽，屬性來(lái)讓一個(gè)區(qū)域可以編輯。這種方式可以很直觀，也可以實(shí)現(xiàn)各種效果，但缺點(diǎn)是火狐瀏覽器不支持這個(gè)標(biāo)簽，只適用于IE瀏覽器，它對(duì)相關(guān)的js腳本要求也比較高。</p><p>目前廣泛應(yīng)用的是使用iframe或者frame中的document 來(lái)實(shí)現(xiàn)HTML元素的可編輯。這種方式盡管對(duì)JS的要求也比較高，但其能適用于目前大部分瀏覽器，且能實(shí)現(xiàn)各種效果。以開(kāi)發(fā)一個(gè)基本編輯功能為例，其基本步驟如下：①向頁(yè)面添加一個(gè)IFrame。這里要注意的是，要判斷頁(yè)面的狀態(tài)，要等頁(yè)面完全加載完畢后再進(jìn)行操作，防止出現(xiàn)找不到某些元素的錯(cuò)誤。②獲取iframe的window對(duì)象和document對(duì)象，分別設(shè)置designMode屬性為on，contentEditable屬性為true讓iframe可編輯。注意這里要打開(kāi)document對(duì)象，向其寫(xiě)入初始化內(nèi)容，以兼容火狐等瀏覽器。③通過(guò)doc.body.innerHTML方法獲取內(nèi)容，這個(gè)內(nèi)容是我們最終要插入到數(shù)據(jù)庫(kù)或顯示在頁(yè)面上的。④增加樣式設(shè)置。上述編輯器只實(shí)現(xiàn)了基本功能，開(kāi)發(fā)者依據(jù)要求，利用諸如document的execCommand方法等增加其它的樣式實(shí)現(xiàn)。⑤利用諸如document的queryCommandState（）方法等改變樣式，修改編輯器的工具欄，使按鈕處根據(jù)光標(biāo)所處位置的樣式，自動(dòng)處于突出或正常顯示。</p><p>3 HTML編輯器的基本調(diào)用方式</p><p>目前，HTML編輯器的調(diào)用方式主要有以下兩種：</p><p>3.1 使用object來(lái)調(diào)用</p><p>其基本方式如下：</p><p>3.1.1 在web頁(yè)中嵌入html編輯器</p><p>在需要嵌入的位置加入以下html代碼：</p><p><object data="hedit.htm" height="300" id="hedit_html" type="text/x-scriptlet" viewastext="" width="480"></object></p><p>其中object標(biāo)簽里的data屬性用來(lái)指定所要調(diào)用的在線編輯器頁(yè)的路徑，id屬性就是所調(diào)用object的id，通過(guò)它來(lái)獲取編輯器中的數(shù)據(jù)。Width和height分別指定編輯器的高度和寬度。</p><p>3.1.2 取得html編輯器中的數(shù)據(jù)</p><p>在用戶交互中，所提交的內(nèi)容會(huì)被放到一個(gè)表單內(nèi)，我們將利用object調(diào)用的編輯器也放在這個(gè)表單里面，利用request對(duì)象來(lái)獲取即可。若因動(dòng)態(tài)頁(yè)面無(wú)法直接獲得object內(nèi)容的，可以設(shè)置一個(gè)隱藏文本域，例如：</p><p> </p><p>

或

在表單提交的同時(shí)設(shè)置一段JS代碼，將object里面的內(nèi)容復(fù)制到隱藏的文本區(qū)域中，在后臺(tái)處理的頁(yè)面中通過(guò)獲取隱藏區(qū)域的數(shù)據(jù)來(lái)得到html在線編輯器的數(shù)據(jù)。

3.2 使用iframe調(diào)用

使用iframe調(diào)用與上面使用object調(diào)用方式相似

3.2.1 在web頁(yè)中嵌入HTML編輯器

在需要嵌入的位置加入以下html代碼：

其中src屬性指定所要調(diào)用的在線編輯器頁(yè)的路徑，id為所調(diào)用IFRAME的id，Width和height指定編輯器得高度和寬度。

3.2.2 取得html編輯器中的數(shù)據(jù)

其操作方式與前面使用object來(lái)調(diào)用HTML編輯器的方式類似，同樣利用表單和隱藏文本域來(lái)完成html在線編輯器的數(shù)據(jù)的獲取。

4 在線HTML編輯器KindEditor在JAVA WEB下的應(yīng)用

盡管開(kāi)發(fā)人員可以自己編寫(xiě)擁有HTML編輯功能的程序，但目前WEB開(kāi)發(fā)中還是廣泛采用第三方提供的在線HTML編輯器，如：KindEditor、Fckeditor（ckeditor）等。這些編輯器的功能各有側(cè)重，基本能滿足論壇、博客及網(wǎng)站后臺(tái)富文本信息管理的要求。

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

用戶可以到KindEditor開(kāi)發(fā)官網(wǎng)下載此HTML編輯器。下載后，解壓縮即可看到其目錄結(jié)構(gòu)。其中的核心目錄是plugins、skins和文件kindeditors.js。在文件目錄中，asp、asp.net、jsp和php分別是其在不同動(dòng)態(tài)頁(yè)面技術(shù)下的應(yīng)用文件夾。基于JAVA的WEB開(kāi)發(fā)，可以參考jsp文件夾下的參考程序。其基本使用步驟：①解壓zip文件，將所有文件（或簡(jiǎn)化后僅包含plugins、skins文件夾和文件kindeditors.js）復(fù)制到工程的應(yīng)用目錄下，以myeclipse開(kāi)發(fā)的JAVA WEB應(yīng)用為例，可將其應(yīng)用文件復(fù)制到工程文件夾＼WebRoot＼ kindeditor目錄下。②將kindeditor/jsp/lib目錄下的3個(gè)jar文件：commons-fileupload-1.2.1.jar、commons-io-1.4.jar和json_simple-1.1.jar復(fù)制到Tomcat的lib目錄下，并重新啟動(dòng)Tomcat。③給kindeditor/attached目錄添加寫(xiě)入權(quán)限。④在頁(yè)面需要嵌入編輯器的位置添加Textarea標(biāo)簽，注意此標(biāo)簽要包含在相應(yīng)表單中，例如：

同時(shí)，在該頁(yè)面添加如下腳本：

KE.show是先執(zhí)行KE.init設(shè)置相關(guān)變量，等DOM全部創(chuàng)建以后才開(kāi)始執(zhí)行KE.create創(chuàng)建編輯器。在show方法中除id之外還可以設(shè)置其它的參數(shù)，具體屬性可以參考kindeditor使用說(shuō)明手冊(cè)。

KindEditor在默認(rèn)情況下自動(dòng)尋找textarea所屬的form元素，找到form后，在onsubmit事件里添加KE.sync函數(shù)，若用form方式提交數(shù)據(jù)，不需要手動(dòng)執(zhí)行KE.sync函數(shù)。

獲取方式可以參考如下代碼：

html = KE.html（“content1”）；//取得HTML內(nèi)容

//同步數(shù)據(jù)后可以直接取得textarea的value

KE.sync（“content1”）；

html = document.getElementById（“content1”）.value；

html = $（“# content1”）.val（）； //jQuery

當(dāng)然我們也可以直接利用request對(duì)象來(lái)獲取表單里的數(shù)據(jù)：

request.getParameter（"content1"）

嵌入kindeditor編輯器后，頁(yè)面的效果如下圖1所示：

5 結(jié)語(yǔ)

HTM編輯器使得文本編輯框更能滿足用戶個(gè)性化輸入的需要，通過(guò)它來(lái)完成富文本的編輯能大大拓展交互輸入框的功能及顯示效果，它已經(jīng)成為WEB系統(tǒng)不可缺少的組成部分。但HTML編輯器的使用也對(duì)開(kāi)發(fā)人員提出了一定要求，我們必須了解和掌握不同HTML編輯器的應(yīng)用方式及特點(diǎn)，依據(jù)開(kāi)發(fā)采用的技術(shù)，完成相應(yīng)的功能。

[參考文獻(xiàn)]

[1]姜福成.基于網(wǎng)頁(yè)平臺(tái)的移動(dòng)文本編輯器的設(shè)計(jì)[J].軟件.2013第05期：131-132.

[2]王樹(shù)威.關(guān)于HTML文本編輯器的選用[J].計(jì)算機(jī)與信息技術(shù).2009第12期：145-147.

[3]于梅英，姜波，張珂.基于Java Web的HTML在線文本編輯器解決方案——以FckEditor在線編輯器為例[J].軟件導(dǎo)刊.20011.2：101-102.

[4]高勇.使用IntraWeb實(shí)現(xiàn)通用的HTML文本編輯器[J].電腦編程技巧與維護(hù).2010第23期：204-205.