普及一下基本知識：什么叫在線HTML編輯器？

說得簡單點(diǎn)，在線HTML編輯器就是在網(wǎng)上發(fā)帖子、寫博客的那個(gè)帶編輯功能的框框，可以進(jìn)行圖文排版等操作。

當(dāng)年本菜鳥做網(wǎng)站的時(shí)候，曾經(jīng)自己用javascript編寫過一個(gè)比較簡單的在線HTML編輯器，用于文本內(nèi)容的排版。但是因?yàn)樗接邢蓿芏喙δ芏紵o法實(shí)現(xiàn)。后來有了eWebEditor，功能確實(shí)強(qiáng)大，但這個(gè)編輯器是個(gè)收費(fèi)的軟件，并且正因?yàn)楣δ軓?qiáng)大，也就顯得過重，一些輕量的場合不是太適用。那有沒有既免費(fèi)、又功能強(qiáng)大、還能適應(yīng)輕量場合的在線HTML編輯器呢？

答案肯定是有的。這首先要感謝這些年來有一批奉獻(xiàn)精神的程序猿們不斷推進(jìn)共享軟件的開發(fā)，讓我們得以享受他們的成果。

一、百度出品的UEditor

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

百度UEditor

UEditor還有一個(gè)輕量版的，叫做UMeditor，簡稱UM。UM是為滿足廣大門戶網(wǎng)站對于簡單發(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的功能對于UE來說還是有所減少，但也有增加，比如拖拽圖片上傳，chrome的圖片拖動(dòng)改變大小等。

百度UEditor界面

二、xhEditor開源HTML編輯器

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

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

主要特點(diǎ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左右。

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

• 無障礙訪問：提供WAI-ARIA全面支持，全鍵盤精細(xì)操作，全程語音向?qū)В峁┩昝罒o障礙訪問體驗(yàn)，充分滿足殘疾人的上網(wǎng)需求。

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

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

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

三、KindEditor開源HTML編輯器

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

KindEditor界面

主要特點(diǎn)：

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

• 開源：開放源代碼，高水平，高品質(zhì)

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

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

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

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

四、阿里的KISSY

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

阿里的KISSY

正因?yàn)镵ISSY采取模塊化設(shè)計(jì)，因此具有高擴(kuò)展性、組件齊全，接口一致、自主開發(fā)、適合多種應(yī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)用。

關(guān)于菜鳥手記：

菜鳥最怕就是看大神的攻略，全是術(shù)語看頭就頭大！本人作為一名對啥都感興趣的資深菜鳥，潛心研究各類技術(shù)二十余年，做網(wǎng)站、寫程序、搞美工、練書法、學(xué)畫畫、作文章、抓管理、裝逼格，屬于搞IT里面最懂美工的，搞HR里面最懂畫畫的，搞文字里面最懂程序的，最終一事無成，博而不精，徒留一堆手記。從菜鳥角度寫手記，同樣的”白”更易懂，你值得擁有！感興趣的，請別忘點(diǎn)右角關(guān)注菜鳥手記。

文本編輯器，Rich Text Editor, 簡稱 RTE, 它提供類似于 Microsoft Word 的編輯功能，容易被不會編寫 HTML 的用戶并需要設(shè)置各種文本格式的用戶所喜愛。它的應(yīng)用也越來越廣泛。

1、UEditor---百度編輯器

網(wǎng)址：http://ueditor.baidu.com/website/

UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼。

UEditor推出后幫助網(wǎng)站開發(fā)者在開發(fā)富文本編輯器所遇到的難題，節(jié)約開發(fā)時(shí)間，有效降低了開發(fā)成本。

2、CKEditor 和 FCKeditor

網(wǎng)址：http://ckeditor.com/

CKEditor是新一代的FCKeditor，是一個(gè)重新開發(fā)的版本。CKEditor是全球最優(yōu)秀的網(wǎng)頁在線文字編輯器之一，因其驚人的性能與可擴(kuò)展性而廣泛的被運(yùn)用于各大網(wǎng)站。它志于輕量化，不需要太復(fù)雜的安裝步驟即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的編程語言相結(jié)合。

3、KindEditor

網(wǎng)址：http://kindeditor.net/

KindEditor 是一套開源的在線HTML編輯器，主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果，開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。

主要特點(diǎn)：

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

開源：開放源代碼，高水平，高品質(zhì)

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

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

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

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

4、TinyMCE

網(wǎng)址：https://www.tinymce.com/

TinyMCE是一個(gè)輕量級的基于瀏覽器的所見即所得編輯器，支持目前流行的各種瀏覽器，由JavaScript寫成。功能配置靈活簡單（兩行代碼就可以將編輯器嵌入網(wǎng)頁中），支持AJAX。另一特點(diǎn)是加載速度非常快，如果你的服務(wù)器采用的腳本語言是 PHP，那還可以進(jìn)一步優(yōu)化。最重要的是，TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件，你可以把它用于商業(yè)應(yīng)用。

5、Simditor

網(wǎng)址：http://simditor.tower.im/

Simditor 是團(tuán)隊(duì)協(xié)作工具 Tower 使用的富文本編輯器。Tower 認(rèn)為，作為一款在線生產(chǎn)力工具，讓用戶能極其舒暢地生產(chǎn)內(nèi)容是它的核心品質(zhì)之一，因此決定自己開發(fā)一款編輯器，這就是 Simditor 產(chǎn)生的原因。Simditor的理念是保持簡單，避免過度的功能，每一個(gè)特性都追求極致的用戶體驗(yàn)。同時(shí)，Simditor也很容易擴(kuò)展。

主要特點(diǎn)：

功能精簡，加載快速

輸出格式化的標(biāo)準(zhǔn) HTML

每一個(gè)功能都有非常優(yōu)秀的使用體驗(yàn)

兼容的瀏覽器：IE10+、Chrome、Firefox、Safari

6、eWebEditor

網(wǎng)址：http://www.ewebeditor.net/

eWebEditor是基于瀏覽器的、所見即所得的在線HTML編輯器。她能夠在網(wǎng)頁上實(shí)現(xiàn)許多桌面編輯軟件（如：Word）所具有的強(qiáng)大可視編輯功能。WEB開發(fā)人員可以用她把傳統(tǒng)的多行文本輸入框<TEXTAREA>替換為可視化的富文本輸入框，使最終用戶可以可視化的發(fā)布HTML格式的網(wǎng)頁內(nèi)容。

7、wangEditor

網(wǎng)址：http://www.wangeditor.com/

wangEditor的定位是做最簡單、易用、快捷、輕量化的富文本編輯器。基于javascript和css開發(fā)的開源免費(fèi)Web富文本編輯器。它經(jīng)歷了兩次代碼重構(gòu)和五次UI升級。配置方便，使用簡單。支持 IE10+ 瀏覽器。

8、xhEditor

網(wǎng)址：http://xheditor.com/

xhEditor是一個(gè)基于jQuery開發(fā)的簡單迷你并且高效的在線可視化HTML編輯器。

xhEditor完全基于Javascript開發(fā)，您可以應(yīng)用在任何的服務(wù)端語言環(huán)境下。

xhEditor可以在CMS、博客、論壇、商城等互聯(lián)網(wǎng)平臺上完美的嵌入運(yùn)行，能夠非常靈活簡單的和您的系統(tǒng)實(shí)現(xiàn)完美的無縫銜接。

自2009年4月首個(gè)版本發(fā)布以來，憑借我們?nèi)诵曰挠脩趔w驗(yàn)和不斷持續(xù)完善的態(tài)度，越來越多的網(wǎng)站選擇了使用xhEditor。

主要特點(diǎn)：

精簡迷你：初始加載65k。若gzip壓縮傳輸，縮減為24k左右。

使用簡單：簡單的調(diào)用方式，就能將您的textarea立馬變成一個(gè)可視化編輯器。

無障礙訪問：提供WAI-ARIA全面支持，全程語音向?qū)В寶埣踩艘材苁褂谩?/p>

內(nèi)置Ajax上傳：內(nèi)置強(qiáng)大的Ajax上傳，剪切板上傳及遠(yuǎn)程抓取上傳。

Word自動(dòng)清理：實(shí)現(xiàn)Word代碼自動(dòng)檢測并清理。

UBB可視化編輯：提供完美的UBB可視化編輯解決方案。

9、bootstrap-wysiwyg

網(wǎng)址：http://www.bootcss.com/p/bootstrap-wysiwyg/

為Bootstrap定制的微型所見即所得（What you see is what you get）富文本編輯器。輕量、簡潔大方好看、使用方便。

10、QuillEditor

網(wǎng)址：https://quilljs.com/

Quill 是一個(gè)開源的富文本編輯器，基于可擴(kuò)展的架構(gòu)設(shè)計(jì)，提供豐富的 API 進(jìn)行定制。一個(gè)可以幫助開發(fā)人員解決所見即所得的編輯器工具，該編輯器旨在通過自身的編輯模塊提供強(qiáng)大的API來構(gòu)建自定義式的編輯器，最重要的是它沒有規(guī)定樣式，你可以自定義自己的編輯器以符合自己的使用需求。