《前端最好用的HTML在線編輯器是哪一款》要點(diǎn)：
本文介紹了前端最好用的HTML在線編輯器是哪一款，希望對(duì)您有用。如果有疑問(wèn)，可以聯(lián)系我們。

相關(guān)主題：JS、Jquery插件 / summernote在線編輯器 / ueditor在線編輯器

開發(fā)網(wǎng)站，一定會(huì)碰到HTML在線編輯器，我們?cè)敿?xì)比較一下這幾款主流的HTML在線編輯器。

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

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

1、功能強(qiáng)大。程序穩(wěn)定可靠。

2、體積越小越好。

3、界面美觀。

4、易于調(diào)用。

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

我接觸過(guò)好幾款的在線編輯器，因?yàn)楣δ苌掀鋵?shí)大同小異，但最后選定了百度前端的ueditor，本站維易PHP培訓(xùn)學(xué)院的后臺(tái)，就是用UE編輯器，選擇它首先的因素是主題界面很清晰明了，大氣。其次是功能強(qiáng)大，各種功能簡(jiǎn)直超出你的意料，比如遠(yuǎn)程自動(dòng)采集（可惜后來(lái)我取消了此功能，因?yàn)楹苋菀自斐蓤D片垃圾，如果用戶終止提交，那么采集過(guò)來(lái)的圖片就成了服務(wù)器上的垃圾，需要加一些功能去處理）。

截個(gè)圖——維易PHP培訓(xùn)學(xué)院所用的UE編輯器：

很喜歡這款編輯器，并且對(duì)它做了大量修改，比如去掉自動(dòng)遠(yuǎn)程采集功能、真正純字?jǐn)?shù)顯示等等。在安全上也做了大量的封裝，和維易PHP框架做了高度的整合，一行代碼就調(diào)用。

但是做為前端就不太適合了，因?yàn)樘嫶罅耍诵男拇a差不多近400KB，如果用戶量小倒也無(wú)所謂，PV一大就有點(diǎn)可怕了。

不過(guò)，UE旗下還有一款為前端而生的精簡(jiǎn)版的UMeditor，核心才138KB左右，不過(guò)，就在今天我試了一下，還是有BUG，比如不能插入百度地圖（解決辦法點(diǎn)此：百度umeditor不能插入百度地圖的解決辦法）。因?yàn)橐s時(shí)間的原因，也沒(méi)有去進(jìn)一步測(cè)試。可以使用。

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

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

這是我們給客戶開發(fā)的網(wǎng)站所用的前端編輯器summernote。簡(jiǎn)潔大氣吧。

不過(guò)，優(yōu)點(diǎn)也是缺點(diǎn)，因?yàn)槭褂胋ase64處理圖片，不宜一次上傳太多圖片，否則可能會(huì)因?yàn)閎ase64代碼太多，造成表單十分龐大，服務(wù)器可能會(huì)處理失敗，這需要對(duì)nginx/apache或PHP設(shè)置做些修改，但大部分人沒(méi)有服務(wù)器設(shè)置項(xiàng)修改權(quán)限。

推薦在您服務(wù)器不允許前端上傳圖片時(shí)，或只允許上傳1-2張以內(nèi)的圖片時(shí)，使用summernote編輯器，這時(shí)相當(dāng)完美。

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

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

1、百度出品的UEditor:

UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼。特別要說(shuō)的是，頭條號(hào)后臺(tái)發(fā)布文章的編輯器就是用的UEditor!

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

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

xhEditor是一個(gè)基于jQuery開發(fā)的簡(jiǎn)單迷你并且高效的可視化HTML編輯器，基于網(wǎng)絡(luò)訪問(wèn)并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

xhEditor完全基于Javascript開發(fā)，可以應(yīng)用在任何的服務(wù)端語(yǔ)言環(huán)境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、論壇、商城等互聯(lián)網(wǎng)平臺(tái)上完美的嵌入運(yùn)行，能夠非常靈活簡(jiǎn)單的和您的系統(tǒng)實(shí)現(xiàn)完美的無(wú)縫銜接。

主要特點(diǎn)：

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

使用簡(jiǎn)單：簡(jiǎn)單的調(diào)用方式，加一個(gè)class屬性就能將textarea變成一個(gè)功能豐富的可視化編輯器。

內(nèi)置Ajax上傳：內(nèi)置強(qiáng)大的Ajax上傳，包括HTML4和HTML5上傳支持(多文件上傳、真實(shí)上傳進(jìn)度及文件拖放上傳)，剪切板上傳及遠(yuǎn)程抓取上傳。

Word自動(dòng)清理：實(shí)現(xiàn)Word代碼自動(dòng)檢測(cè)并清理，生成代碼最優(yōu)化精簡(jiǎn)，卻不丟失細(xì)節(jié)效果。

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

3、KindEditor開源HTML編輯器：

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

主要特點(diǎn)：

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

底層：內(nèi)置自定義 DOM 類庫(kù)，精確操作 DOM

擴(kuò)展：基于插件的設(shè)計(jì)，所有功能都是插件，可根據(jù)需求增減功能

風(fēng)格：修改編輯器風(fēng)格非常容易，只需修改一個(gè) CSS 文件

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

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

嚴(yán)格來(lái)說(shuō)，KISSY不僅僅是一個(gè)在線HTML編輯器，而是由阿里集團(tuán)前端工程師們發(fā)起創(chuàng)建的一個(gè)開源 JS 框架，具有跨終端、模塊化、使用簡(jiǎn)單的特點(diǎn)。里面帶有HTML編輯器這個(gè)模塊。

正因?yàn)镵ISSY采取模塊化設(shè)計(jì)，因此具有高擴(kuò)展性、組件齊全，接口一致、自主開發(fā)、適合多種應(yīng)用場(chǎng)景等優(yōu)點(diǎn)。KISSY 除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等，KISSY 還面向團(tuán)隊(duì)協(xié)作做了獨(dú)特設(shè)計(jì)，提供了經(jīng)典的面向?qū)ο蟆?dòng)態(tài)加載、性能優(yōu)化解決方案。作為一款全終端支持的 JavaScript 框架，KISSY還 為移動(dòng)終端做了大量適配和優(yōu)化，搞移動(dòng)web開發(fā)的可以好好研究一下KISSY的運(yùn)用。

轉(zhuǎn)載請(qǐng)注明本頁(yè)網(wǎng)址：
http://www.fzlkiss.com/jiaocheng/10.html