童瑩

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

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

1 引言

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

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

2 HTML編輯器的基本原理

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

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

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

這是粗體

2.2 HTML編輯器的基本原理

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

2.2.1 非所見即所得

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

或

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

3.2 使用iframe調(diào)用

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

3.2.1 在web頁中嵌入HTML編輯器

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

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

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

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

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

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

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

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

同時，在該頁面添加如下腳本：

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

KindEditor在默認(rèn)情況下自動尋找textarea所屬的form元素，找到form后，在onsubmit事件里添加KE.sync函數(shù)，若用form方式提交數(shù)據(jù)，不需要手動執(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對象來獲取表單里的數(shù)據(jù)：

request.getParameter（"content1"）

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

5 結(jié)語

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

[參考文獻(xiàn)]

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

[2]王樹威.關(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.