前端必備! 幾款主流好用的富文本編輯器推薦
富文本編輯器(Rich Text Editor,RTE)是一種可內(nèi)嵌于瀏覽器,所見即所得的文本編輯器。它提供類似于Office Word 的編輯功能,方便那些不太懂HTML用戶使用,富文本編輯器的應用非常廣泛,它的歷史與圖文網(wǎng)頁誕生的歷史幾乎一樣長。
作為一個技術人員,手上備上兩款富文本編輯器還是很有用的,指不定那個項目就要集成一個進去。到時候現(xiàn)找現(xiàn)用那可就費功夫了,畢竟從開發(fā)上講,每個富文本編輯器的用法都是有區(qū)別的。
下面是我收集的一些業(yè)界比較受歡迎的富文本編輯器,喜歡的朋友、用過的朋友可以一起看看,一起探討。
1、TinyMCE
TinyMCE是一個開源的所見即所得的HTML編輯器,界面相當清新,界面模擬本地軟件的風格,頂部有菜單欄。支持圖片在線處理,插件多,功能非常強大,易于集成,并且擁有可定制的主題。支持目前流行的各種瀏覽器,它可以達到微軟Word類似的編輯體驗。
而且這么好的東西還是開源免費的,目前一直有人維護,這款編輯器使用的人非常多。
更多介紹及下載:https://www.tiny.cloud/docs/demo/full-featured/

2、CKEditor
Ckeditor也是一款非常經(jīng)典的富文本編輯器,官方下載量過千萬。它是在非常著名的FCkEditor基礎上開發(fā)的新版本,F(xiàn)ckEditor的用戶現(xiàn)在基本都轉移到Ckeditor了。
Ckeditor有高性能的實時預覽,它特有行內(nèi)編輯功能,使得編輯內(nèi)容更加直觀,仿佛是在編輯網(wǎng)頁一樣,有很強的可擴展性,被各大網(wǎng)站廣泛運用。
更多介紹及下載:https://ckeditor.com/

3、UEditor
UEditor 是由百度出品的富文本web編輯器,具有輕量,可定制,注重用戶體驗等特點,開源免費。這款編輯器用過的人也非常多,功能非常全面,插件很多,還可以很方便插入百度地圖,接入十分簡單。
16年之后百度沒有怎么更新了,不過現(xiàn)有的功能也足夠用了。UEditor分為UE版(全功能版)和UM版(精簡版),大家可以根據(jù)自己使用環(huán)境選擇不同的版本。
更多介紹及下載:http://ueditor.baidu.com/website/

4、wangEditor
wangEditor輕量級,小巧實用,配置方便,使用簡單??梢宰远x皮膚功能,免費開源。用戶數(shù)量也很多,尤其是用在一些輕型環(huán)境,比如論壇社區(qū)回帖。wangEditor是國人出品的開源項目。
更多介紹及下載:https://www.wangeditor.com/

5、kindeditor
KindEditor歷史也很長了,用戶數(shù)也不少,國內(nèi)某公司出品。免費開源。界面類似于office word,界面和功能中規(guī)中矩,文檔齊全,使用還算方便。
更多介紹及下載:http://kindeditor.net/demo.php

6、simditor
simditor是Tower平臺使用的富文本編輯器,是一款輕量化的編輯器,界面簡約,功能實用,插件不是很多,功能要求不高的可以使用。
雖然是國內(nèi)出品,但文檔是英文的。開源免費。
更多介紹及下載:https://simditor.tower.im/

7、bootstrap-wysiwyg
bootstrap-wysiwyg是基于Bootstrap的輕型、免費開源的富文本編輯器,界面簡潔大方。使用需要先引入bootstrap。
個人覺得bootstrap-wysiwyg這一長串像亂碼一樣的名字影響了它的推廣和使用~ ~畢竟輕型使用環(huán)境還是很多的。
更多介紹及下載:http://mindmup.github.io/bootstrap-wysiwyg/

8、summernote
summernote是一款輕量級的富文本編輯器,比較容易上手,使用體驗流暢,支持各種主流瀏覽器。summernote開源免費,該項目一直比較活躍,一直都有人在維護。
summernote同樣依賴于jquery和bootstrap,使用前先引入這兩項。
更多介紹及下載:https://summernote.org/

9、Froala
Froala是一款功能豐富的富文本編輯器,界面分類清晰,容易集成,容易升級,支持主流瀏覽器,具有行內(nèi)編輯功能。Froala代碼示例很多,可以集成在很多js框架里如React.js,Aurelia,Angular,Ionic,Django等。插件很多,易于擴充功能。
Froala是收費的,不過前端是開源的,如果要使用后臺是要交費的(如果你使用國人強大的crack技能那就是另外一回事了~ ~)。目前有三個定價方式:基礎版(239美元)、專業(yè)版(1199美元)和企業(yè)版(1999美元)。
更多介紹及下載:https://www.froala.com/wysiwyg-editor

10、Quill
Quill是輕型的編輯器,樣式一般(黑白風),功能中等,它的代碼高亮功能比較強,同樣支持行內(nèi)編輯模式,工具條可自定義。
開源免費,項目活躍,一直有人維護。
更多介紹及下載:https://quilljs.com/

11、FreeTextBox
FreeTextBox功能強大,前端支持主流瀏覽器,但后臺只支持.NET。它的外觀和使用風格都和微軟 Word很類似。工具條可以定制,運行速度一般。FreeTextBox分為免費版和pro收費版,一般情況免費版本功能已經(jīng)足夠用了。
更多介紹及下載:http://freetextbox.com/

12、dhtmlxEditor
DHTMLX組件是一整套基于JS的UI庫,功能強大,其中包含編輯器dhtmlxEditor。該編輯器可以直接集成到Angular,React和Vue.js框架中,該編輯器還同時支持Markdown和富文本。
支持普通視圖和類似word一樣的頁面視圖,支持全屏幕,工具支持自定義,包括工具條顏色和樣式等。
dhtmlxEditor分為免費版和收費版,免費版具有絕大多數(shù)功能,而且免費版是開源的你可以在代碼級別隨便擴充。
更多介紹及下載:https://dhtmlx.com/docs/products/dhtmlxRichText/

13、eWebEditor
eWebEditor外觀和使用風格都和微軟 Word很類似,功能很多。工具條可以定制,運行速度很快。導入文件接口很多,支持word、excel、pdf、ppt直接導入,目前版本不支持代碼高亮,不適合純技術平臺使用,適合內(nèi)容編輯人員使用。
eWebEditor有很長的歷史了,是典型的傳統(tǒng)富文本編輯器,不論是界面,還是功能都比較傳統(tǒng)。
eWebEditor是收費的,但也有免費的精簡版,精簡版沒有后臺功能。
更多介紹及下載:http://www.ewebeditor.net/demo/

最后
富文本編輯器產(chǎn)品真的非常多,以上只是本人接觸過的一些,相信還有很多很好的富文本存在,其實也沒必要全都試一遍,只有最適合自己的,才是最好的。
相關文章

怎么免費安裝使用ACDSee Photo Studio home 2024RAW數(shù)碼照片編輯器
ACDSee Photo Studio home 2024免費版安裝教程!ACDSee Photo Studio home 2024免費安裝版是全球第一款數(shù)字資產(chǎn)管理器和帶圖層的 RAW 編輯器,可以滿足創(chuàng)意制圖和攝影的需2023-09-26
怎么免費安裝注冊SlickEdit Pro代碼編輯器 SlickEdit安裝步驟
SlickEdit Pro是一款功能強大的多語言源碼編輯器和開發(fā)環(huán)境,它支持超過60種編程語言,它提供了一些高級代碼編輯功能,如語法高亮、代碼折疊和自動完成,同時還具有用于項目2023-11-23
VSCode和WebStorm哪個更優(yōu)秀?兩款強大的編輯器對比介紹
VSCode和WebStorm哪個更優(yōu)秀?這兩款編輯器都很不錯,他們各自有什么優(yōu)缺點?該怎么選擇呢?下面我們就來看看vscode和webstorm的區(qū)別對比介紹2023-11-29
VS Code 1.85發(fā)布:新增浮動編輯器窗口/Copilot 可解釋 Rust 代碼等
微軟發(fā)布 VS Code 1.85,這個版本主要添加了浮動編輯器窗口、改善無障礙視圖工作流程,精細化擴展更新控制,并更新了 GitHub Copilot 功能2023-12-09
如何免費注冊安裝Oxygen XML Editor?XML編輯器使用教程
Oxygen XML Editor安裝注冊教程!Oxygen XML Editor是一款簡潔并且功能一流的集XML察看和編輯等功能為一體的軟件,由于它提供了對XML編輯特性的完整覆蓋,因此,無論在企業(yè)2024-01-04
怎么免費注冊Oxygen XML Editor?XML編輯器免費版
Oxygen XML Editor是一款簡潔并且功能一流的集XML察看和編輯等功能為一體的軟件,由于它提供了對XML編輯特性的完整覆蓋,因此,無論在企業(yè)界還是學術界,該軟件的應用都很普2024-01-09
wps表格中宏應用很廣泛,該怎么使用宏編輯器呢?今天們就來看看使用宏編輯器進行降序操作的技巧,詳細請看下文介紹2024-01-15
Skylark編輯器英文小寫怎么轉大寫? Skylark將小寫轉成大寫的教程
Skylark編輯器在處理代碼的時候,發(fā)現(xiàn)英文大小寫不統(tǒng)一,想要轉換大小寫,該怎么操作呢?下面我們就來看看詳細的教程2024-01-26
Skylark菜單欄不見了怎么辦 Skylark編輯器菜單欄不見了的恢復方法
Skylark菜單欄菜單欄不見了,想要重新顯示出來,很多功能不知道怎么使用,下面我們就來看看詳細圖文教程2024-01-26
如何處理行首空白的問題 Skylark編輯器批量刪除行首空白的教程
文本首行有空格,想要批量將這些空格刪除,可以直接點擊編輯-高級刪除-刪除行首空白就可以實現(xiàn),詳細請看下文圖文教程2024-01-26

















