富文本编辑器TinyMCE
最近項(xiàng)目中用到了javascript富文本編輯器，從網(wǎng)上找開源控件，發(fā)現(xiàn)很多可選，參考下面文章，列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/12/25/1631766.html?。
通過對比，最終選擇TinyMCE，界面比較美觀，使用和操作也簡單，下面做一個記錄。
TinyMCE是一個開源，純JavaScript HTML WYSIWYG編輯器。它能夠把HTML TEXTAREA或其它HTML標(biāo)簽轉(zhuǎn)換成Rich編輯器。TinyMCE非常易于集成到其它內(nèi)容管理系統(tǒng)中。可以通過外觀/主題和插件來定制滿足自己需求的編輯器。提供漢化語言包。多瀏覽器支持：Mozilla、MSIE、FireFox、Opera和Safari。此外你還可以很方便地使用Ajax來保存和加載內(nèi)容。?
效果圖：
下載地址：
http://www.tinymce.com/download/download.php
demo地址：
http://www.tinymce.com/tryit/full.php
ps:
在源文件包中沒有demo中可直接顯示效果的html頁面，只有腳本庫和樣式等，需要用戶自行創(chuàng)建html頁面，tinymce的使用方法很簡單，相信看過了下面幾個例子馬上就可以著手使用了！
eg1.快速啟動
菜單條
?
------------------------------------------------ 博主經(jīng)營一家發(fā)飾淘寶店，都是純手工制作哦，開業(yè)沖鉆，只為信譽(yù)！需要的親們可以光顧一下！謝謝大家的支持！
店名：
小魚尼莫手工飾品店
經(jīng)營:
發(fā)飾、頭花、發(fā)夾、耳環(huán)等（手工制作）
網(wǎng)店：
http://shop117066935.taobao.com/
? ---------------------------------------------------------------------
繼續(xù)正題...?
?
代碼
<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方法中配置參數(shù)，來確定編輯器的功能！
?
店名：
小魚尼莫手工飾品店
經(jīng)營:
發(fā)飾、頭花、發(fā)夾、耳環(huán)等（手工制作）
網(wǎng)店：
http://shop117066935.taobao.com/
轉(zhuǎn)載于:https://www.cnblogs.com/qiongmiaoer/p/3533862.html
總結(jié)
以上是生活随笔為你收集整理的富文本编辑器TinyMCE的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何将EXCEL中同一个工作薄多张工作表
- 下一篇： VO快速搜索 宝马VO 宝马VO翻译 V