開源富文本編輯器不好找？看這完這10個項目就該有數了

最近項目裡常聽產品們談到後臺的文本編輯器就煩惱，吐槽樣式難看，說後臺效果和前臺展示不一樣，還有吐槽操作不方便功能不全沒有自定義功能的問題。頭疼也要解決，假若用著用著被迫換編輯器，用戶和團隊估計要件要崩潰。

本著開源世界解決一切的宗旨，我又開始逛蕩這github大市場了。以Github stars數為主要的評估依據，兼顧最新更新日期和提交數量，以保證框架能夠讓我們用的更長久。

Quill：豐儉由人的編輯器，確實好用

Github stars: 26.3k , commits: 5,199，License: BSD 3-clause

1. 基於API的設計：通過簡單的API可以細粒度地訪問編輯器的內容，更改和事件。使用JSON作為輸入和輸出，可以始終如一地工作。
2. 自定義內容和格式：Quill公開了自己的文檔模型，允許進行擴展和自定義。通過擴展Quill可以支持的無限格式和內容。已經有用戶添加了幻燈片，交互式清單和3D模型。
3. 跨平臺：支持PC，平板和手機上的所有現代瀏覽器。體驗相同的一致行為，並跨平臺生成HTML。
4. 易於使用：Quill帶有默認值，您只需幾行Javascript就可以立即使用它：

Draft.js：Facebook 開源的基於React的編輯器框架

Github stars: 17.9k , commits: 965，License: MIT license

Draft.js Demo

1. 可擴展和可定製：draft.js 並不是一個開箱即用的編輯器，它提供了一系列富文本編輯器的開發工具，開發人員能夠創建從基本文本樣式到嵌入式媒體各種豐富的富文本撰寫體驗。
2. 聲明式富文本編輯器：Draft.js無縫對接React應用，使用熟悉的API提取渲染，選擇和輸入行為的細節。
3. 不變的編輯器狀態：Draft.js模型使用immutable-js構建，draft.js 中所有數據都是不可變的。每次修改都會新建數據，內存中會保存原來的數據狀態，方便返回到上一步

Slate：用於構建富文本編輯器的自定義框架

Github stars: 17.4k, commits: 3,100，License: MIT license

Rich Text - Slatejs

項目由貢獻者驅動的，沒有任何大型公司的支持，當前處於測試版，核心API現在可以使用，但是它的某些API尚未“最終確定”

Trix: 輸出簡潔一致的HTML

Github stars: 15k, commits: 2,593，License: MIT license

trix demo by basecamp

Trix是用於編寫消息，評論，文章和列表（大多數Web應用程序組成的簡單文檔）的編輯器。它具有複雜的文檔模型，支持嵌入式附件，並輸出簡潔一致的HTML

Trix對設備及瀏覽器的支持情況

medium-editor ：極簡行內編輯器

Github stars: 14.4k, commits: 2,602，License: MIT license

作為跟隨鼠標和焦點的編輯器，使用體驗

1. MediumEditor是一個開源行內編輯器工具欄，使用簡單，鼠標選擇即可對內容進行編輯。
2. 基於JavaScript編寫的，僅約28k，不依賴於任何第三方開源庫
3. 兼容Chrome 、Firfox、Safari、IE、Edge等主流瀏覽器，支持IE9。

可以根據需要調整風格

editor.js：由塊組成內容並返回 JSON 的編輯器

Github stars: 11.7k, commits: 518，License: Apache-2.0

editorjs demo

1. 關於塊樣式: Editor.js 工作區由單獨的塊組成，包括段落、標題、圖像、列表與引號等，它們都是由 Editor.js 中的 Plugin 提供的獨立的內容可編輯元素（或更復雜的結構），並由 Editor.js 的 Core 組合而成。
2. 關於輸出 JSON: Editor.js 則輸出帶有每個塊數據的 JSON 對象。數據可以按您的需要使用：使用HTML為Web客戶端呈現、為移動應用程序本機呈現、為Facebook即時文章或Google AMP創建標記、生成音頻版本等等。乾淨的數據對於後端的清理、驗證和處理非常有用。
3. 瀏覽器支持: Edge 12+ / Firefox 18+ / Chrome 49+ / Safari 10+ / Safari 10+ / Opera 36

wangEditor： 國內開發者的輕量級web富文本框

Github stars: 9.6k, commits 361，License: MIT license

使用起來很方便

基於javascript和css開發的 Web富文本編輯器， 輕量、簡潔、易用、開源免費，創建編輯器時只需要引用 JS，無需引用任何 CSS。

，位置、尺寸都可以隨便定義。如果想要像 知乎專欄、簡書、石墨、網易雲筆記 這些編輯頁面一樣，將編輯區域和菜單分離就可以實現了。

菜單和編輯器區域可自定義樣式。例如：將菜單fixed、編輯器區域高度自動增加等

summernote：Bootstrap 可視化HTML編輯器

Github stars: 9.4k , commits: 3,265，License: MIT license

summernote Demo

summernote是一個簡單靈活的所見即所得的 HTML 在線編輯器.

1. 支持Bootstrap3.x.x到4.x.x；輕量（js+css:100Kb）
2. 適用於所有主要瀏覽器：Safari、Chrome、Firefox、Opera、Edge和Internet Explorer 9+
3. 適用於所有主要操作系統：Windows、MacOS、Linux

tinymce

Github stars: 7.9k, commits: 23,239，License: LGPL-2.1 license

TinyMCE 5

項目社區開源版 - Free Forever

1. 可定製的UI與功能：TinyMCE 5可以進行定製以適合系統，從而無縫融入既有設計。使用者可以專注於產品設計。
2. 提高用戶滿意度：可以在更短的時間內完成更多工作。實踐證明，TinyMCE 5每年可為內容創建者節省數千個小時，同時增加了用戶參與度。

tiptap：基於Vue.js的無渲染富文本編輯器

Github stars: 7.1k, commits: 1,027，License: LGPL-2.1 license

Base on：Prosemirror

basic example of tiptap

不是taptap，Tiptap沒有任何CSS，用戶將（幾乎）完全控制標記和樣式。用戶可以將數據另存為原始HTML字符串，也可以獲取JSON文檔的-serializable表示形式。

---

結語：以上就是本期全部的分享了。為了服務大多數的普通客戶，這期去掉了只支持Markdown的編輯器。可能大家因時間原因無法自己維護而選擇那些開箱即用的，也可能需要深度定製而選擇框架類的，亦或就是要極致的簡單而選擇那些極簡款編輯器。希望大家都能在此找到有用的內容服務手頭的項目。

如果有其他想推薦的編輯器可以留言回覆我哦！

其實原本還有個項目也在分享的List中-Pell, 可以說是 最簡單，最小的WYSIWYG文本編輯器

Github stars: 11.2k, commits 79，License: MIT license

簡單到沒有多餘的語言來介紹

引用官網的一句介紹吧：DOWNLOAD / INSTRUCTIONS / INFORMATION view on Github

起初納悶為啥這麼多stars，那麼久沒更新，看了看項目就明白了：至簡如水，過多的包裝都是浪費。

"

閱讀更多 石頭和馬 的文章

關鍵字: Safari 設計 文本編輯