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

參考---https://mp.weixin.qq.com/s/PyUzOIKNjPukaH7QNQLIfw

富文本編輯器是一種可内嵌于浏覽器，所見即所得的文本編輯器。它提供類似于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/ueditorUEditor

是由百度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分為免費版和收費版，免費版具有絕大多數功能，而且免費版是開源的你可以在代碼級别随便擴充。

最後

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