富文本編輯器

轉載：

https://blog.csdn.net/joycesunny/article/details/77837838

整理15款實用javascript富文本編輯器

2017年09月04日 15:16:42 @CAPRICA@ 閱讀數：18162

 

• 百度UEditor

• 官方網址：http://ueditor.baidu.com/website/

  UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色，開源基於MIT協議，容許自由使用和修改代碼...

• 2bootstrap-wysiwyg

• 官方網址：http://www.bootcss.com/p/bootstrap-wysiwyg/

  bootstrap-wysiwyg 爲Bootstrap定製的微型所見即所得（What you see is what you get）富文本編輯器。
  這個jQuery Bootstrap小插件（5KB, < 200 行代碼）能夠將任何一個DIV轉變成一個WYSIWYG富文本編輯器，靈感來自於 CLEditor 和 bootstrap-wysihtml5.
  下面是他的主要特點：
  在Mac和Wndows平臺上可以自動針對經常使用操做綁定標準熱鍵 能夠經過拖拽插入圖片；支持圖片上傳（也能夠獲取移動設備上的照片）
  語音識別輸入（僅限Chrome瀏覽器） 容許自定義工具條；不生成額外標籤；
  支持網站充分利用Bootstrap、Font Awesome等工具庫的優秀特性 沒有強制規定的樣式 - 一切都由你作主 依賴瀏覽器的標準特性，沒有非標準代碼；
  工具條和鍵盤功能都可定製，而且可以執行任何瀏覽器支持的命令 不會本身建立一個單獨的frame、備份文本區等 - 本編輯器儘可能保持簡單，並僅僅運行在一個DIV內 （可選）清除尾部空格；清除空的div和span
  必須運行在現代瀏覽器上（在Chrome 2六、Firefox 1九、Safari 6上通過測試，用戶報告稱能夠在IE10上工做）
  支持移動設備瀏覽器（在iOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上測試過）

• 3JQUERY NOTEBOOK

• 官方網址：http://raphaelcruzeiro.github.io/jquery-notebook/

  一個簡單，乾淨，優雅的所見即所得的富文本編輯器.用鼠標選中文字可看到效果。

• 4YUI 3

• 官方網址：http://yuilibrary.com/

  YUI Editor 是雅虎的 YUI 包中的一個可視化HTML編輯器組件。

• 5eWebEditor

• 官方網址：http://www.ewebeditor.net/

  eWebEditor是一個基於瀏覽器的在線HTML編輯器，WEB開發人員能夠用她把傳統的多行文本輸入框textarea替換爲可視化的富文本輸入框。 eWebEditor主功能不須要在客戶端安裝任何的組件或控件，操做人員就能夠以直覺、易用的界面建立和發佈網頁內容。 您能夠經過eWebEditor自帶的可視配置工具，對eWebEditor進行徹底的配置。 eWebEditor是很是容易與您現有的系統集成，簡單到您只須要一行代碼就能夠完成eWebEditor的調用。 您能夠把eWebEditor應用於各類基於網頁的應用系統中，如內容管理系統、郵件系統、論壇系統、新聞發佈系統，等與內容發佈相關的全部應用系統。

• 6MarkitUp

• 官方網址：http://markitup.jaysalvat.com/examples/skin1/

  一個基於jquery的開源文本編輯器， 能夠將textarea元素擴展爲一個簡單的文本編輯器。如今支持html、Wiki、BBScode等編輯格式，，有至關不錯的擴展性，可定製皮膚。值得一提的是其官方網站至關優秀，有豐富的示例。此插件有個缺點：沒有所見即所得的模式。

• 7KindEditor

• 官方網址：http://kindeditor.net/demo.php

  KindEditor是基於瀏覽器的所見即所得(WYSWYG)HTML編輯器，主要應用於CMS、論壇、博客等WEB程序裏。 主要特色： 1) 代碼量少，功能比較多。 2) 經過添加plugin的方法，能夠自定義功能。 3) 能夠刪除不須要的plugin，減小文件大小。 4) 能夠任意改變編輯器風格，和網站融爲一體。 5) 代碼容易理解，是一個可維護、可控制的編輯器。

• 8jWYSIWYG

• 官方網址：http://code.google.com/p/jwysiwyg/

  此插件爲內聯的富文本編輯器。它是WYMeditor簡化後的一種替代選擇，總過不超過26KB，打包後只有7KB，，只保留基本功能，但麻雀雖小，五臟俱全，擁有很是強悍的擴展性，同時支持所見即所得的模式。

• 9rich-text-editor-jquery

• 官方網址：http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html

  很是之簡單的文本編輯器，只能說僅供學習。提供了一些基本的文字格式化操做功能。

• 10WYMeditor

• 官方網址：http://www.wymeditor.org/

  WYMeditor是一個所建即所得Jquery富文本編輯器。支持插件擴展功能，是jwysiwyg的前身，有點龐大，功能齊全。

• 11HtmlBox

• 官方網址：http://remiya.com/cms/projects/jquery-plugins/htmlbox/

  HtmlBox文本編輯器，提供一個textarea表單元素，便可實現一個功能強大的HTML文本編輯器，使用很是簡單。 HTMLBox跨瀏覽器、交互性很是好、開源的Jquery富文本編輯器，在Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari等經常使用瀏覽器下測試經過。此編輯器用戶手冊能夠幫住你很是容易地把此編輯器整合到本身的Web系統中。

• 12CKEditor

• 官方網址：http://ckeditor.com/demo

  CKEditor是FCKeditor的3.0版本，具備更好的性能和豐富、強大的集成/交互接口以及一個嶄新的用戶界面等。

• 13widgEditor

• 官方網址：http://www.themaninblue.com/experiment/widgEditor/

  widgEditor是一個符合WEB標準的，輕量級的文本編輯器，提供用戶須要平常所需的功能。

• 14NicEdit

• 官方網址：http://nicedit.com/demos.php

  NicEdit是一個輕量級，跨平臺的Inline Content Editor。NicEdit可以讓任何 element/div變成可編輯或者可以把標準的TextArea轉換成富文本編輯器。

• 15國產富文本編輯-wangEditor

• 官方網址：http://www.wangeditor.com/

  wangEditor基於JavaScript和css開發的 Web富文本編輯器， 輕量、簡潔、易用、開源免費。 與國產編輯器 百度ueditor 和 kindeditor 相比，它輕量、易用、UI設計精緻漂亮。 與國外編輯器 bootstrap-wysiwyg 和 simditor 相比，它文檔易讀、交流方便，更接地氣。 它還會根據使用者的反饋不斷完善，將來將支持移動版。 支持IE6+瀏覽器。