jquery網(wǎng)頁開發(fā)實例精解教學(xué)第11章頁面器插件

第11章頁面編輯器插件頁面編輯器是在瀏覽器中創(chuàng)建一個具有文本編輯功能，類似文本編輯軟件的區(qū)域。這種頁面效果可以應(yīng)用于網(wǎng)站論壇，網(wǎng)站后臺管理，B/S結(jié)構(gòu)的OA平臺等CMS。它方便于用戶在瀏覽器中編輯文章，并在編輯完成后直接發(fā)表。本章我們介紹六個頁面編輯器插件。11.1markItUp插件markItUp插件是一個輕量級的，具有客戶定制并富有彈性的編輯引擎，面向開發(fā)人員的jQuery插件。它可應(yīng)用于CMS（內(nèi)容管理系統(tǒng)）、博客、網(wǎng)站論壇等。這個插件的英文網(wǎng)址：，我們可以在它上面下載插件文件，文檔，以及相關(guān)示例。它的特點：（1）快捷的整合進新的項目中；（2）支持鍵盤快捷鍵；（3）具有工具欄和下拉菜單；（4）靈活的客戶定制；（5）使用的隨意性；（6）Ajax動態(tài)預(yù)覽；（7）可定制主題。11.1.1安裝插件在安裝過程中我們在引入插件文件之前需要加載jQuery庫文件，并在引入插件文件之后繼續(xù)引用插件的配置文件，如下所示：（1）引入JS文件（2）引入配置插件的JSON的文件（3）引入CSS樣式文件（4）加入插件調(diào)用Javascipt功能代碼，在調(diào)用插件初始化方法時，可以使用元素id，元素的class，元素標(biāo)記名：<scripttype="text/javascript"><!—$('#markItUp').markItUp(mySettings); //初始化插件--></script>11.1.2鍵盤的使用鍵盤的使用主要有以下幾種：（1）Ctrl+其他鍵，標(biāo)記插入；（2）Shift+其他鍵，新標(biāo)記的插入；（3）Ctrl+Shift+其他鍵，在選中的所有行添加標(biāo)記；（4）Alt+其他鍵，使用可選標(biāo)記插入。11.1.3標(biāo)記語言定制標(biāo)記語言定制主要是設(shè)定插件可以處理的是何種標(biāo)記語言，以及這種標(biāo)記語言的語法如何，用戶在編輯器中插入該標(biāo)記語言時的行為特征等。分析標(biāo)記語言的定制包含若干屬性，參考下表所示。markupSet中的屬性說明，參考下表所示。屬性類型說明name字符串按鈕名稱classname字符串按鈕應(yīng)用的類名key字符串按鈕對應(yīng)的快捷鍵openWith字符串或函數(shù)在選擇位置前標(biāo)記添加closeWith字符串或函數(shù)在選擇位置后標(biāo)記添加replaceWith字符串或函數(shù)在鼠標(biāo)或選擇位置替換文本openBlockWith字符串或函數(shù)在完整的塊前加入文本closeBlockWith字符串或函數(shù)在完整的塊后加入文本mutiline布爾標(biāo)記是否插入每一行或者一個完整的塊placeHolder字符串或函數(shù)占位符文本被插入beforeInsert函數(shù)標(biāo)記插入前被調(diào)用的函數(shù)afterInsert函數(shù)標(biāo)記插入后被調(diào)用的函數(shù)beforeMutiInsert函數(shù)多行標(biāo)記插入前調(diào)用的函數(shù)afterMutiInsert函數(shù)多行標(biāo)記插入后調(diào)用的函數(shù)dropMenu打開下拉菜單的按鈕下面用一個例子來介紹這個插件的使用。這個例子主要是想介紹初始化插件時如何通過配置文件配置插件樣式及功能，并在這個例子中使用了插件的開始標(biāo)記、結(jié)束標(biāo)記、填充文本內(nèi)容等行為屬性，以及通過插件內(nèi)置刪除函數(shù)如何在頁面中刪除插件效果。效果如圖1和圖2所示。圖1圖211.2jwysiwyg插件jwysiwyg插件是一個所見即所得的jQuery頁面編輯器。使用這個編輯器需要引用jQuery1.3.2以后版本，還需要jQuery.UI.Dialog和jQuery.UI.Resizable庫文件。這個插件的英文網(wǎng)址。11.2.1jwysiwyg插件基本介紹這個插件主要是通過配置屬性與函數(shù)來控制它的工作，具體屬性說明參考下表所示。插件具有內(nèi)置函數(shù)，為我們操作插件提供了方便，參考下表所示。函數(shù)說明addControl(name,settings)添加控制按鈕clear清除內(nèi)容createLink(szURL)創(chuàng)建超鏈接destroy銷毀編輯器對象document編輯器中的文檔getContent獲取編輯器內(nèi)容insertImage(szURL,attribute)插入圖片insertTable(colCount,rowCount,filler)添加表格removeFormat移除格式save存儲編輯器中文本的改變selectAll選中編輯器中所有內(nèi)容setContent設(shè)置編輯器中文本內(nèi)容編輯器中包含一些控制器按鈕，為用戶提供文本編輯操作，參考下表所示。效果圖是常用按鈕樣式。11.2.2基本應(yīng)用這個例子使用了不帶任何參數(shù)設(shè)置的初始化參數(shù)。在這里使用默認(rèn)編輯器的形態(tài)，加載了常用按鈕，使用基本功能。效果如圖所示。11.2.3全功能編輯器這個例子中在插件初始化過程中將插件所支持的功能全部加載。本處使用了前面介紹的關(guān)于插件中添加標(biāo)記按鈕的屬性，并為一些標(biāo)記屬性（如標(biāo)題按鈕）指定了依舊不同瀏覽器實現(xiàn)功能的樣式，以及插件的單擊實現(xiàn)效果。效果如圖1和圖2所示。圖1圖211.2.4可調(diào)整大小的編輯器這個例子利用了jQueryUI庫的調(diào)整元素大小的庫文件，并對jwysiwyg插件的相關(guān)屬性進行了調(diào)整，設(shè)定了插件的可調(diào)整大小屬性，但是要在HTML文件頭部多引入jQueryUI庫文件。效果如圖1和圖2所示。圖1圖211.2.5編輯器內(nèi)容的左右移動這個例子在編輯器的控制按鈕集合中加入了左右移動按鈕，可以使編輯器內(nèi)容從左邊框移至右邊框，也可反方向移動。實際上這里使用了插件中內(nèi)容的左右對齊屬性。效果如圖1和圖2所示。圖1圖2

11.2.6根據(jù)內(nèi)容自動調(diào)整大小的編輯器這個例子使用了編輯器的自動增長屬性，使編輯器可以根據(jù)內(nèi)容自動增長。這里使用了前面介紹的自動增長屬性，即最大高度屬性。效果如圖所示。11.2.7自定義功能控制按鈕這個例子使用了可以自定義功能的控制按鈕，在編輯器內(nèi)容中添加引號功能的按鈕。這里添加了一個自定義的內(nèi)縮進標(biāo)記按鈕，并使用了blockquote這個標(biāo)記包裝我們選擇的文本。效果如圖1和圖2所示。圖1圖2

11.3HtmlBox插件這個插件是一個跨瀏覽器，交互式，開源的所見即所得的jQuery編輯器。這個插件安裝簡單直觀，配置方便，適用于CMS、論壇、用戶留言、聯(lián)系信息等應(yīng)用。它的英文網(wǎng)址。HtmlBox的特點：（1）易整合（2）多瀏覽器支持（3）占用空間?。?）XHTML輸出（5）支持Ajax（6）更換外觀方便（7）自定義圖標(biāo)11.3.1如何安裝插件的安裝實際就是插件文件的引入。在引入這個插件之前同樣需要先引入jQuery庫文件，這個插件使用的jQuery庫文件版本較低。（1）引入JS文件：（2）創(chuàng)建一個文本區(qū)域：<textareaid='ha'></textarea>（3）設(shè)置運行插件的屬性特點，屬性的使用參考介紹的例子。11.3.2屬性特點在運行插件時需要對插件進行初始化，即配置運行屬性，參考下表所示。11.3.3內(nèi)置函數(shù)HtmlBox通過內(nèi)置函數(shù)實現(xiàn)特點功能，參考下表所示。11.3.4編輯器可使用的工具HtmlBox可支持的對文本加工的工具可參考下表所示。11.3.5插件應(yīng)用舉例（1）全功能編輯器。這個例子使用了編輯器的所有工具功能。這里使用了插件的工具條屬性，并在該屬性中設(shè)定了常用工具按鈕，同時設(shè)定了插件的外觀顏色為藍色。效果如圖所示。（2）添加新功能編輯器。這個例子添加了新的圖標(biāo)和圖標(biāo)對應(yīng)的功能。這個插件同樣可以添加自定義的工具按鈕，并設(shè)定他們的功能。新功能的定義在插件初始化的工具欄設(shè)定中完成。效果如圖1和圖2、圖3所示。圖1圖2

圖311.4LightweightRTE插件這個插件也是jQuery的富文本編輯器。它也是一個輕量型的插件，易于擴展，為不同的設(shè)計模式和資源模式設(shè)定不同的工具欄。它的英文網(wǎng)址。在這里我們首先介紹一下這個插件的相關(guān)方法，參考表所示。下面我們看一下這個插件的例子，這里使用了插件初始化函數(shù)，并設(shè)定了插件的基本樣式，加載了插件的基本控制按鈕和HTML標(biāo)記處理按鈕。效果如圖所