最近項目中用到了javascript富文本編輯器，從網上找開源控件，發現很多可選，參考下面文章，列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/12/25/1631766.html 。
通過對比，最終選擇TinyMCE，界面比較美觀，使用和操作也簡單，下面做一個記錄。
TinyMCE是一個開源，純JavaScript HTML WYSIWYG編輯器。它能夠把HTML TEXTAREA或其它HTML標簽轉換成Rich編輯器。TinyMCE非常易於集成到其它內容管理系統中。可以通過外觀/主題和插件來定制滿足自己需求的編輯器。提供漢化語言包。多瀏覽器支持：Mozilla、MSIE、FireFox、Opera和Safari。此外你還可以很方便地使用Ajax來保存和加載內容。
效果圖：
下載地址：
http://www.tinymce.com/download/download.php
demo地址：
http://www.tinymce.com/tryit/full.php
ps:
在源文件包中沒有demo中可直接顯示效果的html頁面，只有腳本庫和樣式等，需要用戶自行創建html頁面，tinymce的使用方法很簡單，相信看過了下面幾個例子馬上就可以着手使用了！
eg1.快速啟動
菜單條
------------------------------------------------
博主經營一家發飾淘寶店，都是純手工制作哦，開業沖鑽，只為信譽！需要的親們可以光顧一下！謝謝大家的支持！
店名：
小魚尼莫手工飾品店
經營:
發飾、頭花、發夾、耳環等（手工制作）
網店：
http://shop117066935.taobao.com/
---------------------------------------------------------------------
繼續正題...
代碼
<DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea" }); </script> </head> <body> <form method="post" action="somepage"> <textarea name="content" style="width:100%"></textarea> </form> </body> </html>
eg2.Full featured
菜單條
代碼
<DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "emoticons template paste textcolor moxiemanager" ], toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", toolbar2: "print preview media | forecolor backcolor emoticons", image_advtab: true, templates: [ {title: 'Test template 1', content: 'Test 1'}, {title: 'Test template 2', content: 'Test 2'} ] }); </script> </head> <body> <form method="post" action="somepage"> <textarea name="content" style="width:100%"></textarea> </form> </body> </html>
ps: 在init方法中配置參數，來確定編輯器的功能！
店名：
小魚尼莫手工飾品店
經營:
發飾、頭花、發夾、耳環等（手工制作）
網店：
http://shop117066935.taobao.com/