前端必備! 幾款主流好用的富文本編輯器推薦

富文本編輯器(Rich Text Editor,RTE)是一種可內(nèi)嵌于瀏覽器,所見即所得的文本編輯器。它提供類似于Office Word 的編輯功能,方便那些不太懂HTML用戶使用,富文本編輯器的應(yīng)用非常廣泛,它的歷史與圖文網(wǎng)頁誕生的歷史幾乎一樣長。
作為一個技術(shù)人員,手上備上兩款富文本編輯器還是很有用的,指不定那個項(xiàng)目就要集成一個進(jìn)去。到時候現(xiàn)找現(xiàn)用那可就費(fèi)功夫了,畢竟從開發(fā)上講,每個富文本編輯器的用法都是有區(qū)別的。
下面是我收集的一些業(yè)界比較受歡迎的富文本編輯器,喜歡的朋友、用過的朋友可以一起看看,一起探討。
1、TinyMCE
TinyMCE是一個開源的所見即所得的HTML編輯器,界面相當(dāng)清新,界面模擬本地軟件的風(fēng)格,頂部有菜單欄。支持圖片在線處理,插件多,功能非常強(qiáng)大,易于集成,并且擁有可定制的主題。支持目前流行的各種瀏覽器,它可以達(dá)到微軟Word類似的編輯體驗(yàn)。
而且這么好的東西還是開源免費(fèi)的,目前一直有人維護(hù),這款編輯器使用的人非常多。
更多介紹及下載:https://www.tiny.cloud/docs/demo/full-featured/
2、CKEditor
Ckeditor也是一款非常經(jīng)典的富文本編輯器,官方下載量過千萬。它是在非常著名的FCkEditor基礎(chǔ)上開發(fā)的新版本,F(xiàn)ckEditor的用戶現(xiàn)在基本都轉(zhuǎn)移到Ckeditor了。
Ckeditor有高性能的實(shí)時預(yù)覽,它特有行內(nèi)編輯功能,使得編輯內(nèi)容更加直觀,仿佛是在編輯網(wǎng)頁一樣,有很強(qiáng)的可擴(kuò)展性,被各大網(wǎng)站廣泛運(yùn)用。
更多介紹及下載:https://ckeditor.com/
3、UEditor
UEditor 是由百度出品的富文本web編輯器,具有輕量,可定制,注重用戶體驗(yàn)等特點(diǎn),開源免費(fèi)。這款編輯器用過的人也非常多,功能非常全面,插件很多,還可以很方便插入百度地圖,接入十分簡單。
16年之后百度沒有怎么更新了,不過現(xiàn)有的功能也足夠用了。UEditor分為UE版(全功能版)和UM版(精簡版),大家可以根據(jù)自己使用環(huán)境選擇不同的版本。
更多介紹及下載:http://ueditor.baidu.com/website/
4、wangEditor
wangEditor輕量級,小巧實(shí)用,配置方便,使用簡單。可以自定義皮膚功能,免費(fèi)開源。用戶數(shù)量也很多,尤其是用在一些輕型環(huán)境,比如論壇社區(qū)回帖。wangEditor是國人出品的開源項(xiàng)目。
更多介紹及下載:https://www.wangeditor.com/
5、kindeditor
KindEditor歷史也很長了,用戶數(shù)也不少,國內(nèi)某公司出品。免費(fèi)開源。界面類似于office word,界面和功能中規(guī)中矩,文檔齊全,使用還算方便。
更多介紹及下載:http://kindeditor.net/demo.php
6、simditor
simditor是Tower平臺使用的富文本編輯器,是一款輕量化的編輯器,界面簡約,功能實(shí)用,插件不是很多,功能要求不高的可以使用。
雖然是國內(nèi)出品,但文檔是英文的。開源免費(fèi)。
更多介紹及下載:https://simditor.tower.im/
7、bootstrap-wysiwyg
bootstrap-wysiwyg是基于Bootstrap的輕型、免費(fèi)開源的富文本編輯器,界面簡潔大方。使用需要先引入bootstrap。
個人覺得bootstrap-wysiwyg這一長串像亂碼一樣的名字影響了它的推廣和使用~ ~畢竟輕型使用環(huán)境還是很多的。
更多介紹及下載:http://mindmup.github.io/bootstrap-wysiwyg/
8、summernote
summernote是一款輕量級的富文本編輯器,比較容易上手,使用體驗(yàn)流暢,支持各種主流瀏覽器。summernote開源免費(fèi),該項(xiàng)目一直比較活躍,一直都有人在維護(hù)。
summernote同樣依賴于jquery和bootstrap,使用前先引入這兩項(xiàng)。
更多介紹及下載:https://summernote.org/
9、Froala
Froala是一款功能豐富的富文本編輯器,界面分類清晰,容易集成,容易升級,支持主流瀏覽器,具有行內(nèi)編輯功能。Froala代碼示例很多,可以集成在很多js框架里如React.js,Aurelia,Angular,Ionic,Django等。插件很多,易于擴(kuò)充功能。
Froala是收費(fèi)的,不過前端是開源的,如果要使用后臺是要交費(fèi)的(如果你使用國人強(qiáng)大的crack技能那就是另外一回事了~ ~)。目前有三個定價方式:基礎(chǔ)版(239美元)、專業(yè)版(1199美元)和企業(yè)版(1999美元)。
更多介紹及下載:https://www.froala.com/wysiwyg-editor
10、Quill
Quill是輕型的編輯器,樣式一般(黑白風(fēng)),功能中等,它的代碼高亮功能比較強(qiáng),同樣支持行內(nèi)編輯模式,工具條可自定義。
開源免費(fèi),項(xiàng)目活躍,一直有人維護(hù)。
更多介紹及下載:https://quilljs.com/
11、FreeTextBox
FreeTextBox功能強(qiáng)大,前端支持主流瀏覽器,但后臺只支持.NET。它的外觀和使用風(fēng)格都和微軟 Word很類似。工具條可以定制,運(yùn)行速度一般。FreeTextBox分為免費(fèi)版和pro收費(fèi)版,一般情況免費(fèi)版本功能已經(jīng)足夠用了。
更多介紹及下載:http://freetextbox.com/
12、dhtmlxEditor
DHTMLX組件是一整套基于JS的UI庫,功能強(qiáng)大,其中包含編輯器dhtmlxEditor。該編輯器可以直接集成到Angular,React和Vue.js框架中,該編輯器還同時支持Markdown和富文本。
支持普通視圖和類似word一樣的頁面視圖,支持全屏幕,工具支持自定義,包括工具條顏色和樣式等。
dhtmlxEditor分為免費(fèi)版和收費(fèi)版,免費(fèi)版具有絕大多數(shù)功能,而且免費(fèi)版是開源的你可以在代碼級別隨便擴(kuò)充。
更多介紹及下載:https://dhtmlx.com/docs/products/dhtmlxRichText/
13、eWebEditor
eWebEditor外觀和使用風(fēng)格都和微軟 Word很類似,功能很多。工具條可以定制,運(yùn)行速度很快。導(dǎo)入文件接口很多,支持word、excel、pdf、ppt直接導(dǎo)入,目前版本不支持代碼高亮,不適合純技術(shù)平臺使用,適合內(nèi)容編輯人員使用。
eWebEditor有很長的歷史了,是典型的傳統(tǒng)富文本編輯器,不論是界面,還是功能都比較傳統(tǒng)。
eWebEditor是收費(fèi)的,但也有免費(fèi)的精簡版,精簡版沒有后臺功能。
更多介紹及下載:http://www.ewebeditor.net/demo/
最后
富文本編輯器產(chǎn)品真的非常多,以上只是本人接觸過的一些,相信還有很多很好的富文本存在,其實(shí)也沒必要全都試一遍,只有最適合自己的,才是最好的。
相關(guān)文章
怎么免費(fèi)安裝使用ACDSee Photo Studio home 2024RAW數(shù)碼照片編輯器
ACDSee Photo Studio home 2024免費(fèi)版安裝教程!ACDSee Photo Studio home 2024免費(fèi)安裝版是全球第一款數(shù)字資產(chǎn)管理器和帶圖層的 RAW 編輯器,可以滿足創(chuàng)意制圖和攝影的需2023-09-26怎么免費(fèi)安裝注冊SlickEdit Pro代碼編輯器 SlickEdit安裝步驟
SlickEdit Pro是一款功能強(qiáng)大的多語言源碼編輯器和開發(fā)環(huán)境,它支持超過60種編程語言,它提供了一些高級代碼編輯功能,如語法高亮、代碼折疊和自動完成,同時還具有用于項(xiàng)目2023-11-23VSCode和WebStorm哪個更優(yōu)秀?兩款強(qiáng)大的編輯器對比介紹
VSCode和WebStorm哪個更優(yōu)秀?這兩款編輯器都很不錯,他們各自有什么優(yōu)缺點(diǎn)?該怎么選擇呢?下面我們就來看看vscode和webstorm的區(qū)別對比介紹2023-11-29VS Code 1.85發(fā)布:新增浮動編輯器窗口/Copilot 可解釋 Rust 代碼等
微軟發(fā)布 VS Code 1.85,這個版本主要添加了浮動編輯器窗口、改善無障礙視圖工作流程,精細(xì)化擴(kuò)展更新控制,并更新了 GitHub Copilot 功能2023-12-09如何免費(fèi)注冊安裝Oxygen XML Editor?XML編輯器使用教程
Oxygen XML Editor安裝注冊教程!Oxygen XML Editor是一款簡潔并且功能一流的集XML察看和編輯等功能為一體的軟件,由于它提供了對XML編輯特性的完整覆蓋,因此,無論在企業(yè)2024-01-04怎么免費(fèi)注冊O(shè)xygen XML Editor?XML編輯器免費(fèi)版
Oxygen XML Editor是一款簡潔并且功能一流的集XML察看和編輯等功能為一體的軟件,由于它提供了對XML編輯特性的完整覆蓋,因此,無論在企業(yè)界還是學(xué)術(shù)界,該軟件的應(yīng)用都很普2024-01-09wps宏編輯器怎么用? wps宏編輯器進(jìn)行降序排列的技巧
wps表格中宏應(yīng)用很廣泛,該怎么使用宏編輯器呢?今天們就來看看使用宏編輯器進(jìn)行降序操作的技巧,詳細(xì)請看下文介紹2024-01-15Skylark編輯器英文小寫怎么轉(zhuǎn)大寫? Skylark將小寫轉(zhuǎn)成大寫的教程
Skylark編輯器在處理代碼的時候,發(fā)現(xiàn)英文大小寫不統(tǒng)一,想要轉(zhuǎn)換大小寫,該怎么操作呢?下面我們就來看看詳細(xì)的教程2024-01-26Skylark菜單欄不見了怎么辦 Skylark編輯器菜單欄不見了的恢復(fù)方法
Skylark菜單欄菜單欄不見了,想要重新顯示出來,很多功能不知道怎么使用,下面我們就來看看詳細(xì)圖文教程2024-01-26如何處理行首空白的問題 Skylark編輯器批量刪除行首空白的教程
文本首行有空格,想要批量將這些空格刪除,可以直接點(diǎn)擊編輯-高級刪除-刪除行首空白就可以實(shí)現(xiàn),詳細(xì)請看下文圖文教程2024-01-26