14 款前端常用的富文本編輯器插件

來源:web 前端開發

富文本編輯器是一種可內嵌於瀏覽器,所見即所得的文本編輯器。它提供類似於 Office Word 的編輯功能,方便那些不太懂 html 用戶使用,富文本編輯器的應用非常廣泛,它的歷史與圖文網頁誕生的歷史幾乎一樣長。

作爲一個技術人員,手上備上兩款富文本編輯器還是很有用的,指不定那個項目就要集成一個進去。

到時候現找現用那可就費功夫了,畢竟從開發上講,每個富文本編輯器的用法都是有區別的。

下面是我收集的一些業界比較受歡迎的富文本編輯器,喜歡的朋友、用過的朋友可以一起看看,一起探討。

1、wangEditor

**網址:**http://www.wangeditor.com/

基於 JavaScript 和 css 開發的 Web 富文本編輯器, 輕量、簡潔、界面美觀、易用、開源免費。

2、TinyMCE

****網址:****https://www.tiny.cloud/docs/demo/full-featured/

TinyMCE 是一個輕量級的基於瀏覽器的所見即所得編輯器,由 JavaScript 寫成。它對 IE6 + 和 Firefox1.5 + 都有着非常良好的支持。

功能齊全,界面美觀,就是文檔是英文的,對開發人員英文水平有一定要求。

3、百度 ueditor

****網址:****https://github.com/fex-team/ueditor

UEditor 是由百度 web 前端研發部開發所見即所得富文本 web 編輯器,具有輕量,功能齊全,可定製,注重用戶體驗等特點,開源基於 MIT 協議,允許自由使用和修改代碼,缺點是已經沒有更新了。

4、kindeditor

**網址:**http://kindeditor.net/demo.php

KindEditor 是一套開源的在線 html 編輯器,主要用於讓用戶在網站上獲得所見即所得編輯效果,開發人員可以用 KindEditor 把傳統的多行文本輸入框 (textarea) 替換爲可視化的富文本輸入框。

KindEditor 使用 JavaScript 編寫,可以無縫地與 Java、.NET、php、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。  

5、Textbox

**網址:**https://www.textbox.io/

Textbox 是一款極簡但功能強大的在線文本編輯器,支持桌面設備和移動設備。主要功能包含內置的圖像處理和存儲、文件拖放、拼寫檢查和自動更正。

此外,該工具還實現了屏幕閱讀器等輔助技術,並符合 WAI-ARIA 可訪問性標準。

6、CKEditor

**網址:**https://ckeditor.com/ckeditor-5/demo/

CKEditor 官方版是一款專業專業的在線文字編輯器,軟件支持各種不同的瀏覽器,可以讓用戶們輕鬆在線編輯,CKEditor5 官方版軟件體積非常小巧,使用起來也十分方便快捷,還能與不同的編程語言相結合,是大家編輯網頁代碼的必備工具。

7、quill

**網址:**https://quilljs.com/

Quill 是輕型的編輯器,樣式一般(黑白風),功能中等,它的代碼高亮功能比較強,同樣支持行內編輯模式,工具條可自定義。

開源免費,項目活躍,一直有人維護。

8、simditor

**網址:**https://simditor.tower.im/

simditor 是 Tower 平臺使用的富文本編輯器,是一款輕量化的編輯器,界面簡約,功能實用,插件不是很多,功能要求不高的可以使用。

雖然是國內出品,但文檔是英文的。開源免費。

9、summernote

**網址:**https://summernote.org/

summernote 是一款輕量級的富文本編輯器,比較容易上手,使用體驗流暢,支持各種主流瀏覽器。

summernote 開源免費,該項目一直比較活躍,一直都有人在維護。summernote 同樣依賴於 jquery 和 bootstrap,使用前先引入這兩項。

10、jodit

**網址:**https://xdsoft.net/jodit/

Jodit 是一款使用純 TypeScript 編寫的(無需使用其他庫),美觀實用的所見即所得(WYSIWYG)開源富文本編輯器,支持中文,超強自定義。  

11、Editor.md

**網址:**https://pandao.github.io/editor.md/

功能非常豐富的編輯器,左端編輯,右端預覽,非常方便,完全免費。

12、froala Editor

**網址:**https://www.froala.com/wysiwyg-editor

界面非常好看,功能非常強大,非常好用(非免費,可破解)

13、eWebEditor

**網址:**http://www.ewebeditor.net/

eWebEditor 外觀和使用風格都和微軟 Word 很類似,功能很多。工具條可以定製,運行速度很快。

導入文件接口很多,支持 word、excel、pdf、ppt 直接導入,目前版本不支持代碼高亮,不適合純技術平臺使用,適合內容編輯人員使用。

eWebEditor 有很長的歷史了,是典型的傳統富文本編輯器,不論是界面,還是功能都比較傳統。eWebEditor 是收費的,但也有免費的精簡版,精簡版沒有後臺功能。

14、dhtmlxEditor

**網址:**https://dhtmlx.com/docs/products/dhtmlxRichText/

DHTMLX 組件是一整套基於 js 的 UI 庫,功能強大,其中包含編輯器 dhtmlxEditor。

該編輯器可以直接集成到 Angular,react 和 vue.js 框架中,該編輯器還同時支持 Markdown 和富文本。

支持普通視圖和類似 word 一樣的頁面視圖,支持全屏幕,工具支持自定義,包括工具條顏色和樣式等。

dhtmlxEditor 分爲免費版和收費版,免費版具有絕大多數功能,而且免費版是開源的你可以在代碼級別隨便擴充。

最後

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

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/PyUzOIKNjPukaH7QNQLIfw