jwysiwyg 輕量級編輯器執行畫面

jWYSIWYG輕量級的網頁編輯器，可直接編輯HTML內容，並具備WYSIWYG的效果，此網頁編輯器套件體積很小，只有不到26KB。主要的原則是保持簡潔的畫面呈現，所呈現的功能都是最基本而常用到的。

使用方法：
首先載入jQuery和jWYSIWYG的JS檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../src/jquery.wysiwyg.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/controls/default.js" type="text/javascript" charset="utf-8"></script>

HTML只要指定textarea的ID和大小
<textarea id="editor" style="width:500px; height:300px;"></textarea>

最後加上JS的部分
<script type="text/javascript">
$(function(){
$('#editor').wysiwyg({autoGrow:true,controls:"bold,italic,|,undo,redo"});
});//controls 表示功能表列
</script>

這樣編輯器就完成了!!是不是很容易啊!!

最後在附上基本功能包含哪些!

功能表代號	功能說明
bold	字形粗體
hightlight	文字高度
h1,h2,h3	加上h1,h2,h3標籤
indent	縮排
insertHorizontalRule	插入水平線
insertImage	插入圖片
insertOrderedLit	插入數字項目編號
insertUnorderedList	插入項目符號
italic	文字斜體
justifyCenter	置中對齊
justifyFull	左右對齊
justifyLeft	靠左對齊
justifyRight	靠右對齊
link	連結
outdent	凸排
paste	貼上
redo	還原復原步驟
strikeThrough	刪除線
subscript	下標文字
superscript	上標文字
underline	底線
undo	復原

他還有包含一些圖片上傳的功能,不過在本篇就先不做說明,有興趣可以到他們的網站上看說明或來信告知!

作者網站：https://github.com/akzhan/jwysiwyg
檔案大小：628 KB(包含範例和所有的程式碼)
檔案下載：https://github.com/akzhan/jwysiwyg
檔案備份：下載