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

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