哇寶部落格
Wabow Information Inc. Blog
官方網站 / demo
http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html
Lightweight RTE是一套標榜檔案輕量化的所見即所得的文字編輯器(Rich Text Editors簡稱RTE)，載入方式為jQuery Plugin。Lightweight RTE有以下幾個特點:
Super lightweight 7kb uncompressed (超輕量的檔案大小僅僅7kb)
Compatible with major browsers (適用於主流瀏覽器)(官網寫適用於IE6, Firefox 2, Opera 9, Safari 3.03不過我用IE7也是正常運作)
Degrade gracefully (簡潔)
GNU General Public License (符合公共通用授權)
現在就讓我們看一下要怎麼使用吧!
程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ch" lang="fr-ch"> <head> <title>A light weight RTE jQuery Plugin</title> <link type="text/css" rel="stylesheet" href="rte.css" /> </head> <body> <form> <p> <textarea name="description" id="id_description" class="rte-zone"></textarea> </p> <input type="submit" /> </form> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.rte.js"></script> <script type="text/javascript"> $('.rte-zone').rte("css url", "toolbox images url"); </script> </body> </html> |
程式碼解說
jQuery-Plugin部份主要是載入jquery.rte.js這隻檔案，而jQuery的程式碼為$('.rte-zone').rte("css url", "toolbox images url");這行。工具列上的小圖示只要檔名一樣可以自行更換自己喜歡的圖案。
功能解說
Lightweight RTE的工具列上提供了以下功能:
預設字型樣式 : Block Style / Paragraph / Title / Address
粗體
斜體
項目
超連結
圖片 : 輸入圖片網址
純文字編輯模式 / 所見即所得模式 切換
總結
雖然Lightweight RTE與其他的RTE比較起來功能稍顯陽春，但在ㄧ些需求不高的時候不失為一種更方便簡單的方案，檔案輕量更是其特點。不妨試用看看!
- Tags: jQuery