官方網站 / 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有以下幾個特點:

  1. Super lightweight 7kb uncompressed (超輕量的檔案大小僅僅7kb)
  2. Compatible with major browsers (適用於主流瀏覽器)(官網寫適用於IE6, Firefox 2, Opera 9, Safari 3.03不過我用IE7也是正常運作)
  3. Degrade gracefully (簡潔)
  4. GNU General Public License (符合公共通用授權)

現在就讓我們看一下要怎麼使用吧!

程式碼

<!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的工具列上提供了以下功能:

  1. 預設字型樣式 : Block Style / Paragraph /  Title / Address
  2. 粗體
  3. 斜體
  4. 項目
  5. 超連結
  6. 圖片 : 輸入圖片網址
  7. 純文字編輯模式 / 所見即所得模式 切換


總結

雖然Lightweight RTE與其他的RTE比較起來功能稍顯陽春，但在ㄧ些需求不高的時候不失為一種更方便簡單的方案，檔案輕量更是其特點。不妨試用看看!

文章標籤
全站熱搜
創作者介紹
創作者 山村有祐 的頭像
山村有祐

老周的部落

山村有祐 發表在 痞客邦 留言(0) 人氣(2,321)