2008年12月21日 星期日

jQuery--wysiwyg editor


這次要介紹的是jQuery專門用來強化textarea的外掛插件--wysiwyg editor(所見即所得編輯器)

這個編輯器的好處是大小特小,全部(程式、圖、CSS)加起來大概才13K,適合在高流量或需要對文字作簡單編輯的地方使用:

使用方法:
1.首先在html文本加入textarea:


<textarea name="context" cols="50" rows="10" id="context">
內文
</textarea>

2.在同一個html下引入所需的script與CSS(總共需要jquery.js, jquery.wysiwyg.js, jquery.wysiwyg.css):

<!-- jQuery引擎-->
<script src="jquery/jquery.js" type="text/javascript"></script>
<!-- 強化textarea編輯能力的jQuery外掛--> 
<script language="javascript" src="jquery/jquery.wysiwyg.js"></script>
<link href="jquery/jquery.wysiwyg.css" rel="stylesheet" type="text/css">


3.在網頁中將該textarea套入此plugin:

<script language="javascript">
$(document).ready(function(){
//把id為context的tag綁定wysiwyg編輯器!
$('#context').wysiwyg();
});
</script>

很簡單吧!

沒有留言: