jquery 文本編輯器插件引用一些實例

markitup輕量級的文本編輯器

jQuery Universal Markup Editor是一個基於jQuery的輕量級的文本編輯器，可實現非常強大的在線文本編輯器功能。可支持html、Wiki、BBScode等編輯格式，具體很強的擴展性，使用非常方便。

使用說明
需要使用jQuery庫文件和markitup庫文件
使用實例
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="markitup/jquery.markitup.js"></script>
3. <script type="text/javascript" src="markitup/sets/html/set.js"></script>

二，HTML部分

1. <textarea id="html" cols="80" rows="20">
2. ...biuuu.com...
3. </textarea>

三，javascrpt部分

1. <script language="javascript">
2. $(document).ready(function()    {
3. $('#html').markItUp(myHtmlSettings);
4. });
5. </script>

以上實例可知，使用jQuery插件markitup實現在線文本編輯器非常簡單，功能非常豐富，這裏只介紹了一個簡單的HTML實例，大家可去markitup官方網址查看相關文檔。

點我查看jQuery插件markitup的jQuery官方文檔介紹
點我查看jQuery插件markitup輕量級的文本編輯器在線演示

HtmlBox文本編輯器

上期在[jQuery插件markitup輕量級的文本編輯器]介紹了一個基於jQuery的文本編輯器，這裏介紹另外一個jQuery插件HtmlBox文本編輯器，提供一個textarea表單元素，即可實現一個功能強大的HTML文本編輯器，使用非常簡單。

使用說明
需要使用jQuery庫文件和HtmlBox文本編輯器庫文件

使用實例
一，包含文件部分

1. <script language="Javascript" src="jquery-1.2.6.min.js" type="text/javascript"></script>
2. <script language="Javascript" src="htmlbox.min.js" type="text/javascript"></script>

二，HTML部分

1. <textarea id='biuuu'></textarea>

三，Javascript部分

1. <script language="Javascript" type="text/javascript">
2. $("#biuuu").css("width",220).css("height",120).htmlbox()
3. .separator("dots").button("cut").button("copy").button("paste")
4. .separator("dots").button("bold").button("italic").button("underline")
5. .separator("dots",2).button("undo",2).button("redo",2)
6. .separator("dots",2).button("left",2).button("center",2).button("right",2).button("justify",2)
7. .init();
8. </script>

代碼分析：
width表示寬度
height表示高度
$("#biuuu").css("width",220).css("height",120).htmlbox()表示生成一個寬度爲220高度爲120的HtmlBox文本編輯器。然後增加一些使用功能，上面實例定義了幾個功能，如剪切cut、複製copy、粘貼paste、加粗bold等。

這只是一個非常小的使用實例，其中只包含了HtmlBox文本編輯器部分功能，這些都可以自定義，具體大家可以查看完整的演示代碼，使用非常簡單。

點我下載jQuery插件HtmlBox文本編輯器

可結合FCKeditor與WYSIWYG的jQuery插件IPWEditor文本編輯器

很多的PHP開發者應該對FCKeditor文本編輯器非常熟悉，因爲大部分的國產PHP教材書中在介紹CMS製作時都會推薦使用這個文本編輯器，另外一個就是WYSIWYG編輯器，，這裏介紹一個可結合FCKeditor與WYSIWYG的jQuery插件IPWEditor文本編輯器，IPWEditor插件可實現少量的代碼改動就能實現這二個編緝器的結合。
使用說明
需要使用jQuery庫文件和editable.wysiwyg庫文件
可結合fckeditor組件

必優推薦級別：★★★

點我查看IPWEditor文本編輯器在線演示

使用實例
一，包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="jquery.editable.wysiwyg-1.3.3.js"></script>
3. <script type="text/javascript" src="fckeditor/fckeditor.js"></script>

二，HTML部分

1. <div id="editable" class="biuuu">點擊彈出editable 和 WYSIWYG編輯器 </div>

三，Javascript部分

1. <script type="text/javascript">
2. var oFCKeditor = new FCKeditor( 'editor1') ;
3. oFCKeditor.BasePath = "fckeditor/" ;
4. $('.biuuu').editable(
5. {
6. type: 'wysiwyg',
7. editor: oFCKeditor,
8. onSubmit:function submitData(content){
9. alert(content.current)
10. },
11. submit:'save'
12. });
13. </script>

如上實例，實現如效果圖的文本編輯器，實現當點擊類名爲biuuu的DIV彈出一個文本編輯器，具體說明如下：

一，初始化FCKeditor對象
var oFCKeditor = new FCKeditor( 'editor1') ;

二，設置FCKeditor路徑
oFCKeditor.BasePath = "fckeditor/" ;

三，加載編輯器部分
$('.biuuu').editable({});

具體參數部分比較簡單，分別是type類型，editor編輯器，onSubmit提交回調事件，submit提交元素名稱，具體可查看editable的JS文件配置部分。

這個可結合FCKeditor與WYSIWYG的jQuery插件IPWEditor文本編輯器，非常有意思，創新的想法是需要的，這樣纔能有更多靈感和火化。