《前端最好用的HTML在線編輯器是哪一款》要點：
本文介紹了前端最好用的HTML在線編輯器是哪一款，希望對您有用。如果有疑問，可以聯系我們。

相關主題：JS、Jquery插件 / summernote在線編輯器 / ueditor在線編輯器

開發網站，一定會碰到HTML在線編輯器，我們詳細比較一下這幾款主流的HTML在線編輯器。

如果你還不懂什么是HTML在線編輯器，那普及一下：在線HTML編輯器。就是在網上發帖子、寫博客的那個帶圖文編輯和排版功能的框框，就是HTML在線編輯器插件。

選擇哪一款在線HTML編輯器？這主要是以下幾點：

1、功能強大。程序穩定可靠。

2、體積越小越好。

3、界面美觀。

4、易于調用。

一、我是用哪一款編輯器？

我接觸過好幾款的在線編輯器，因為功能上其實大同小異，但最后選定了百度前端的ueditor，本站維易PHP培訓學院的后臺，就是用UE編輯器，選擇它首先的因素是主題界面很清晰明了，大氣。其次是功能強大，各種功能簡直超出你的意料，比如遠程自動采集（可惜后來我取消了此功能，因為很容易造成圖片垃圾，如果用戶終止提交，那么采集過來的圖片就成了服務器上的垃圾，需要加一些功能去處理）。

截個圖——維易PHP培訓學院所用的UE編輯器：

很喜歡這款編輯器，并且對它做了大量修改，比如去掉自動遠程采集功能、真正純字數顯示等等。在安全上也做了大量的封裝，和維易PHP框架做了高度的整合，一行代碼就調用。

但是做為前端就不太適合了，因為太龐大了，核心心代碼差不多近400KB，如果用戶量小倒也無所謂，PV一大就有點可怕了。

不過，UE旗下還有一款為前端而生的精簡版的UMeditor，核心才138KB左右，不過，就在今天我試了一下，還是有BUG，比如不能插入百度地圖（解決辦法點此：百度umeditor不能插入百度地圖的解決辦法）。因為要趕時間的原因，也沒有去進一步測試。可以使用。

不過，在前端界面，我推薦summernote，更輕量，功能也十分強大，依賴于bootstrap ，界面美觀大氣（主題更換http://summernote.org/examples/#themes-with-bootswatch），功能也不弱。

更吸引人的是，它的圖片上傳是用base64，用戶提交后才會在服務端處理，不會造成圖片垃圾（當然，其它編輯器也可以配合服務端處理做到這點，但比較麻煩）。如下圖。

這是我們給客戶開發的網站所用的前端編輯器summernote。簡潔大氣吧。

不過，優點也是缺點，因為使用base64處理圖片，不宜一次上傳太多圖片，否則可能會因為base64代碼太多，造成表單十分龐大，服務器可能會處理失敗，這需要對nginx/apache或PHP設置做些修改，但大部分人沒有服務器設置項修改權限。

推薦在您服務器不允許前端上傳圖片時，或只允許上傳1-2張以內的圖片時，使用summernote編輯器，這時相當完美。

二、幾款主題的在線編輯器：

不知道我上面說了這么多，會不會對你的選擇造成影響，其實，其它編輯器也是很棒的，比如kindeditor，xheditor（我最早用的一款，特輕量），都是很棒的，只是每個人各有所好吧，下面把幾款常用的推薦一下。

1、百度出品的UEditor:

UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼。特別要說的是，頭條號后臺發布文章的編輯器就是用的UEditor!

UEditor還有一個輕量版的，叫做UMeditor，簡稱UM。UM是為滿足廣大門戶網站對于簡單發帖框，或者回復框需求所定制的在線HTML編輯器。 主要特點是容量和加載速度上的改變，主文件的代碼量為139k，而且放棄了使用傳統的iframe模式，采用了div的加載方式， 以達到更快的加載速度和零加載失敗率。UM的第一個使用者是百度貼吧，以經受貼吧每天幾億的pv的考驗，功能設計應當是最優化的了。 當然隨著代碼的減少，UM的功能對于UE來說還是有所減少，但也有增加，比如拖拽圖片上傳，chrome的圖片拖動改變大小等。

2、xhEditor開源HTML編輯器——輕量

xhEditor是一個基于jQuery開發的簡單迷你并且高效的可視化HTML編輯器，基于網絡訪問并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

xhEditor完全基于Javascript開發，可以應用在任何的服務端語言環境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、論壇、商城等互聯網平臺上完美的嵌入運行，能夠非常靈活簡單的和您的系統實現完美的無縫銜接。

主要特點：

精簡迷你：初始加載4個文件，包括：1個js(50k)+2個css(10k)+1個圖片(5k)，總共65k。若js和css文件進行gzip壓縮傳輸，可以進一步縮減為24k左右。

使用簡單：簡單的調用方式，加一個class屬性就能將textarea變成一個功能豐富的可視化編輯器。

內置Ajax上傳：內置強大的Ajax上傳，包括HTML4和HTML5上傳支持(多文件上傳、真實上傳進度及文件拖放上傳)，剪切板上傳及遠程抓取上傳。

Word自動清理：實現Word代碼自動檢測并清理，生成代碼最優化精簡，卻不丟失細節效果。

UBB可視化編輯：支持UBB可視化編輯，在獲得安全高效代碼存儲的同時，又能享受可視化編輯的便捷。

3、KindEditor開源HTML編輯器：

KindEditor 也是一個開源的在線HTML編輯器， 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。本菜鳥感覺這個編輯器上手比較容易，功能也很強大，界面比較友好，很適合菜鳥使用。可惜的是最近好像停止更新了，官網好象也能不正常訪問。

主要特點：

快速：體積小，加載速度快

底層：內置自定義 DOM 類庫，精確操作 DOM

擴展：基于插件的設計，所有功能都是插件，可根據需求增減功能

風格：修改編輯器風格非常容易，只需修改一個 CSS 文件

兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera

4、阿里的KISSY框架中的editor組件

嚴格來說，KISSY不僅僅是一個在線HTML編輯器，而是由阿里集團前端工程師們發起創建的一個開源 JS 框架，具有跨終端、模塊化、使用簡單的特點。里面帶有HTML編輯器這個模塊。

正因為KISSY采取模塊化設計，因此具有高擴展性、組件齊全，接口一致、自主開發、適合多種應用場景等優點。KISSY 除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等，KISSY 還面向團隊協作做了獨特設計，提供了經典的面向對象、動態加載、性能優化解決方案。作為一款全終端支持的 JavaScript 框架，KISSY還 為移動終端做了大量適配和優化，搞移動web開發的可以好好研究一下KISSY的運用。

轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/10.html