說得簡單點,在線HTML編輯器就是在網上發帖子、寫博客的那個帶編輯功能的框框,可以進行圖文排版等操作。
當年本菜鳥做網站的時候,曾經自己用javascript編寫過一個比較簡單的在線HTML編輯器,用于文本內容的排版。但是因為水平有限,很多功能都無法實現。后來有了eWebEditor,功能確實強大,但這個編輯器是個收費的軟件,并且正因為功能強大,也就顯得過重,一些輕量的場合不是太適用。那有沒有既免費、又功能強大、還能適應輕量場合的在線HTML編輯器呢?
答案肯定是有的。這首先要感謝這些年來有一批奉獻精神的程序猿們不斷推進共享軟件的開發,讓我們得以享受他們的成果。
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器,具有輕量,可定制,注重用戶體驗等特點,開源基于MIT協議,允許自由使用和修改代碼。特別要說的是,頭條號后臺發布文章的編輯器就是用的UEditor!
百度UEditor
UEditor還有一個輕量版的,叫做UMeditor,簡稱UM。UM是為滿足廣大門戶網站對于簡單發帖框,或者回復框需求所定制的在線HTML編輯器。 主要特點是容量和加載速度上的改變,主文件的代碼量為139k,而且放棄了使用傳統的iframe模式,采用了div的加載方式, 以達到更快的加載速度和零加載失敗率。UM的第一個使用者是百度貼吧,以經受貼吧每天幾億的pv的考驗,功能設計應當是最優化的了。 當然隨著代碼的減少,UM的功能對于UE來說還是有所減少,但也有增加,比如拖拽圖片上傳,chrome的圖片拖動改變大小等。
百度UEditor界面
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變成一個功能豐富的可視化編輯器。
無障礙訪問:提供WAI-ARIA全面支持,全鍵盤精細操作,全程語音向導,提供完美無障礙訪問體驗,充分滿足殘疾人的上網需求。
內置Ajax上傳:內置強大的Ajax上傳,包括HTML4和HTML5上傳支持(多文件上傳、真實上傳進度及文件拖放上傳),剪切板上傳及遠程抓取上傳。
Word自動清理:實現Word代碼自動檢測并清理,生成代碼最優化精簡,卻不丟失細節效果。
UBB可視化編輯:支持UBB可視化編輯,在獲得安全高效代碼存儲的同時,又能享受可視化編輯的便捷。
KindEditor 也是一個開源的在線HTML編輯器, 使用 JavaScript 編寫,可以無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。本菜鳥感覺這個編輯器上手比較容易,功能也很強大,界面比較友好,很適合菜鳥使用。可惜的是最近好像停止更新了,官網好象也能不正常訪問。
KindEditor界面
主要特點:
快速:體積小,加載速度快
開源:開放源代碼,高水平,高品質
底層:內置自定義 DOM 類庫,精確操作 DOM
擴展:基于插件的設計,所有功能都是插件,可根據需求增減功能
風格:修改編輯器風格非常容易,只需修改一個 CSS 文件
兼容:支持大部分主流瀏覽器,比如 IE、Firefox、Safari、Chrome、Opera
嚴格來說,KISSY不僅僅是一個在線HTML編輯器,而是由阿里集團前端工程師們發起創建的一個開源 JS 框架,具有跨終端、模塊化、使用簡單的特點。里面帶有HTML編輯器這個模塊。
阿里的KISSY
正因為KISSY采取模塊化設計,因此具有高擴展性、組件齊全,接口一致、自主開發、適合多種應用場景等優點。KISSY 除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等,KISSY 還面向團隊協作做了獨特設計,提供了經典的面向對象、動態加載、性能優化解決方案。作為一款全終端支持的 JavaScript 框架,KISSY還 為移動終端做了大量適配和優化,搞移動web開發的可以好好研究一下KISSY的運用。
關于菜鳥手記:
菜鳥最怕就是看大神的攻略,全是術語看頭就頭大!本人作為一名對啥都感興趣的資深菜鳥,潛心研究各類技術二十余年,做網站、寫程序、搞美工、練書法、學畫畫、作文章、抓管理、裝逼格,屬于搞IT里面最懂美工的,搞HR里面最懂畫畫的,搞文字里面最懂程序的,最終一事無成,博而不精,徒留一堆手記。從菜鳥角度寫手記,同樣的”白”更易懂,你值得擁有!感興趣的,請別忘點右角關注菜鳥手記。
然任何文本編輯器都可以在創建超文本標記語言文檔時起作用,但一些HTML編輯器針對HTML的語法進行了優化。根據可定制性、特性和功能,我們確定了九個最佳的Windows免費編輯器。
Notepad++是最受歡迎的免費筆記應用程序和代碼編輯器。默認情況下,這是Windows中提供的Notepad軟件的一個更強大的版本。
Notepad++包括行號、顏色編碼、提示和其他標準Notepad應用程序所沒有的有用工具等功能。這些新增功能使其成為web設計師和前端開發人員的理想選擇。
Komodo有兩個版本:Komodo Edit和Komodo IDE。Edit是開源的,可以免費下載。這是IDE的精簡版。
Komodo Edit包含許多用于HTML和CSS開發的強大功能。此外,它還允許你添加擴展以獲得更多的語言支持或其他有用的功能,如特殊字符。
Komodo并不是最好的HTML編輯器。盡管如此,它的價格還是不錯的,尤其是如果你使用XML構建,它確實非常出色。
Aptana Studio 3為網頁開發提供了一個有趣的視角。它不關注HTML,而是關注JavaScript和其他允許你創建豐富的互聯網應用程序的元素。
Aptana Studio 3可能不是最適合簡單網頁設計需求的。但是,如果你更傾向于web應用程序開發,它的工具集可能非常適合。
Apache NetBeans提供了一個Java IDE,可以幫助你構建健壯的web應用程序。
像大多數IDE一樣,Apache NetBeans有一個陡峭的學習曲線,因為它的工作方式與其他網絡編輯器不同。然而,一旦你習慣了它,你就會發現它非常有用。
IDE的版本控制和開發人員協作功能對于在大型開發環境中工作的人員來說非常方便。如果你編寫Java和網頁,這是一個很好的工具。
Microsoft Visual Studio Community是一個可視化IDE,可幫助web開發人員和其他程序員為web、移動設備和桌面創建應用程序。你以前可能使用過它,但Visual Studio Community是該軟件的最新版本。
微軟為專業和企業用戶提供免費下載和付費版本(包括免費試用版)。
Microsoft Visual Studio Code是一款免費的僅限編碼的應用程序,是Visual Studio套件的一部分,但它是獨立的。它是一個優秀的獨立代碼編輯器,適用于數十種編碼和腳本語言。
BlueGriffon是一系列網頁編輯器中的最新一個,從Nvu開始,發展到Kompozer,現在在BlueGriffn達到頂峰。Gecko是Firefox的渲染引擎,它為它提供了強大的功能,因此它很好地展示了如何在符合標準的瀏覽器中渲染工作。
它可用于Windows、macOS和Linux以及各種語言。
這是唯一一個真正的所見即所得編輯器列入這個列表。因此,它對初學者和小企業主更具吸引力,他們希望以可視化的方式工作,而不是以代碼為中心的界面。
Bluefish是一個功能齊全的HTML編輯器,適用于各種平臺,包括Windows、macOS和Linux。
值得注意的功能包括代碼敏感的拼寫檢查、多種語言(HTML、PHP、CSS等)的自動完成、代碼片段、項目管理和自動保存。
Bluefish主要是一個代碼編輯器,而不是專門的網絡編輯器。這意味著它對使用HTML以外的語言編寫的web開發人員具有靈活性。然而,如果你是一名設計師,想要更多以網絡為中心或所見即所得的界面,Bluefish可能不適合你。
Eclipse是一個復雜的開發環境,非常適合在各種平臺和語言上進行大量編碼的人。它是在插件設計中構建的,所以如果你需要編輯某些內容,請找到合適的插件并開始工作。
如果你創建復雜的web應用程序,Eclipse有許多功能可以使你的項目更容易構建。它提供Java、JavaScript和PHP插件以及一個面向移動開發人員的插件。
CoffeeCup HTML編輯器有一個免費版本和一個付費完整版本。免費產品是一款不錯的產品,但該平臺的許多最佳功能都需要你購買完整版本。
CoffeeCup還提供了一個名為“響應式網站設計2”的升級,支持響應式網頁設計。此版本可以與編輯器的完整版本一起添加到捆綁包中。
許多網站將其列為免費的所見即所得編輯器。然而,當我們測試它時,它需要購買CoffeeCup Visual Editor才能支持所見即所得。免費版本只是一個非常好的文本編輯器。
這個編輯器在網絡設計師中的得分與Eclipse和Komodo Edit一樣高,但在網絡開發人員中的得分沒有那么高。然而,如果你是網絡設計和開發的初學者,或者你是一個小企業主,那么這個工具比Komodo Edit或Eclipse有更多適合你的功能。
富文本編輯器(Rich Text Editor,RTE)是一種可內嵌于瀏覽器,所見即所得的文本編輯器。它提供類似于Office Word 的編輯功能,方便那些不太懂HTML用戶使用,富文本編輯器的應用非常廣泛,它的歷史與圖文網頁誕生的歷史幾乎一樣長。
TinyMCE是一個開源的所見即所得的HTML編輯器,界面相當清新,界面模擬本地軟件的風格,頂部有菜單欄。支持圖片在線處理,插件多,功能非常強大,易于集成,并且擁有可定制的主題。支持目前流行的各種瀏覽器,它可以達到微軟Word類似的編輯體驗。
而且這么好的東西還是開源免費的,目前一直有人維護,這款編輯器使用的人非常多。
Ckeditor也是一款非常經典的富文本編輯器,官方下載量過千萬。它是在非常著名的FCkEditor基礎上開發的新版本,FckEditor的用戶現在基本都轉移到Ckeditor了。
Ckeditor有高性能的實時預覽,它特有行內編輯功能,使得編輯內容更加直觀,仿佛是在編輯網頁一樣,有很強的可擴展性,被各大網站廣泛運用。
UEditor 是由百度出品的富文本web編輯器,具有輕量,可定制,注重用戶體驗等特點,開源免費。這款編輯器用過的人也非常多,功能非常全面,插件很多,還可以很方便插入百度地圖,接入十分簡單。
16年之后百度沒有怎么更新了,不過現有的功能也足夠用了。UEditor分為UE版(全功能版)和UM版(精簡版),大家可以根據自己使用環境選擇不同的版本。
wangEditor輕量級,小巧實用,配置方便,使用簡單。可以自定義皮膚功能,免費開源。用戶數量也很多,尤其是用在一些輕型環境,比如論壇社區回帖。wangEditor是國人出品的開源項目。
KindEditor歷史也很長了,用戶數也不少,國內某公司出品。免費開源。界面類似于office word,界面和功能中規中矩,文檔齊全,使用還算方便。
simditor是Tower平臺使用的富文本編輯器,是一款輕量化的編輯器,界面簡約,功能實用,插件不是很多,功能要求不高的可以使用。
雖然是國內出品,但文檔是英文的。開源免費。
bootstrap-wysiwyg是基于Bootstrap的輕型、免費開源的富文本編輯器,界面簡潔大方。使用需要先引入bootstrap。
個人覺得bootstrap-wysiwyg這一長串像亂碼一樣的名字影響了它的推廣和使用~ ~畢竟輕型使用環境還是很多的。
summernote是一款輕量級的富文本編輯器,比較容易上手,使用體驗流暢,支持各種主流瀏覽器。summernote開源免費,該項目一直比較活躍,一直都有人在維護。
summernote同樣依賴于jquery和bootstrap,使用前先引入這兩項。
Froala是一款功能豐富的富文本編輯器,界面分類清晰,容易集成,容易升級,支持主流瀏覽器,具有行內編輯功能。Froala代碼示例很多,可以集成在很多js框架里如React.js,Aurelia,Angular,Ionic,Django等。插件很多,易于擴充功能。
Froala是收費的,不過前端是開源的,如果要使用后臺是要交費的(如果你使用國人強大的crack技能那就是另外一回事了~ ~)。目前有三個定價方式:基礎版(239美元)、專業版(1199美元)和企業版(1999美元)。
Quill是輕型的編輯器,樣式一般(黑白風),功能中等,它的代碼高亮功能比較強,同樣支持行內編輯模式,工具條可自定義。
開源免費,項目活躍,一直有人維護。
FreeTextBox功能強大,前端支持主流瀏覽器,但后臺只支持.NET。它的外觀和使用風格都和微軟 Word很類似。工具條可以定制,運行速度一般。FreeTextBox分為免費版和pro收費版,一般情況免費版本功能已經足夠用了。
DHTMLX組件是一整套基于JS的UI庫,功能強大,其中包含編輯器dhtmlxEditor。該編輯器可以直接集成到Angular,React和Vue.js框架中,該編輯器還同時支持Markdown和富文本。
支持普通視圖和類似word一樣的頁面視圖,支持全屏幕,工具支持自定義,包括工具條顏色和樣式等。
dhtmlxEditor分為免費版和收費版,免費版具有絕大多數功能,而且免費版是開源的你可以在代碼級別隨便擴充。
eWebEditor外觀和使用風格都和微軟 Word很類似,功能很多。工具條可以定制,運行速度很快。導入文件接口很多,支持word、excel、pdf、ppt直接導入,目前版本不支持代碼高亮,不適合純技術平臺使用,適合內容編輯人員使用。
eWebEditor有很長的歷史了,是典型的傳統富文本編輯器,不論是界面,還是功能都比較傳統。
eWebEditor是收費的,但也有免費的精簡版,精簡版沒有后臺功能。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。