最近項(xiàng)目里常聽(tīng)產(chǎn)品們談到后臺(tái)的文本編輯器就煩惱，吐槽樣式難看，說(shuō)后臺(tái)效果和前臺(tái)展示不一樣，還有吐槽操作不方便功能不全沒(méi)有自定義功能的問(wèn)題。頭疼也要解決，假若用著用著被迫換編輯器，用戶和團(tuán)隊(duì)估計(jì)要件要崩潰。

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

Quill：豐儉由人的編輯器，確實(shí)好用

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

豐儉由人的編輯器，確實(shí)好用

1. 基于API的設(shè)計(jì)：通過(guò)簡(jiǎn)單的API可以細(xì)粒度地訪問(wèn)編輯器的內(nèi)容，更改和事件。使用JSON作為輸入和輸出，可以始終如一地工作。
2. 自定義內(nèi)容和格式：Quill公開了自己的文檔模型，允許進(jìn)行擴(kuò)展和自定義。通過(guò)擴(kuò)展Quill可以支持的無(wú)限格式和內(nèi)容。已經(jīng)有用戶添加了幻燈片，交互式清單和3D模型。
3. 跨平臺(tái)：支持PC，平板和手機(jī)上的所有現(xiàn)代瀏覽器。體驗(yàn)相同的一致行為，并跨平臺(tái)生成html。
4. 易于使用：Quill帶有默認(rèn)值，您只需幾行JAVAscript就可以立即使用它：

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

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

Draft.js Demo

1. 可擴(kuò)展和可定制：draft.js 并不是一個(gè)開箱即用的編輯器，它提供了一系列富文本編輯器的開發(fā)工具，開發(fā)人員能夠創(chuàng)建從基本文本樣式到嵌入式媒體各種豐富的富文本撰寫體驗(yàn)。
2. 聲明式富文本編輯器：Draft.js無(wú)縫對(duì)接React應(yīng)用，使用熟悉的API提取渲染，選擇和輸入行為的細(xì)節(jié)。
3. 不變的編輯器狀態(tài)：Draft.js模型使用immutable-js構(gòu)建，draft.js 中所有數(shù)據(jù)都是不可變的。每次修改都會(huì)新建數(shù)據(jù)，內(nèi)存中會(huì)保存原來(lái)的數(shù)據(jù)狀態(tài)，方便返回到上一步

Slate：用于構(gòu)建富文本編輯器的自定義框架

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

Rich Text - Slatejs

項(xiàng)目由貢獻(xiàn)者驅(qū)動(dòng)的，沒(méi)有任何大型公司的支持，當(dāng)前處于測(cè)試版，核心API現(xiàn)在可以使用，但是它的某些API尚未“最終確定”

Trix: 輸出簡(jiǎn)潔一致的HTML

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

trix demo by basecamp

Trix是用于編寫消息，評(píng)論，文章和列表（大多數(shù)Web應(yīng)用程序組成的簡(jiǎn)單文檔）的編輯器。它具有復(fù)雜的文檔模型，支持嵌入式附件，并輸出簡(jiǎn)潔一致的HTML

Trix對(duì)設(shè)備及瀏覽器的支持情況

medium-editor ：極簡(jiǎn)行內(nèi)編輯器

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

作為跟隨鼠標(biāo)和焦點(diǎn)的編輯器，使用體驗(yàn)

1. MediumEditor是一個(gè)開源行內(nèi)編輯器工具欄，使用簡(jiǎn)單，鼠標(biāo)選擇即可對(duì)內(nèi)容進(jìn)行編輯。
2. 基于JavaScript編寫的，僅約28k，不依賴于任何第三方開源庫(kù)
3. 兼容Chrome 、Firfox、Safari、IE、Edge等主流瀏覽器，支持IE9。

可以根據(jù)需要調(diào)整風(fēng)格

editor.js：由塊組成內(nèi)容并返回 JSON 的編輯器

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

editorjs demo

1. 關(guān)于塊樣式: Editor.js 工作區(qū)由單獨(dú)的塊組成，包括段落、標(biāo)題、圖像、列表與引號(hào)等，它們都是由 Editor.js 中的 Plugin 提供的獨(dú)立的內(nèi)容可編輯元素（或更復(fù)雜的結(jié)構(gòu)），并由 Editor.js 的 Core 組合而成。
2. 關(guān)于輸出 JSON: Editor.js 則輸出帶有每個(gè)塊數(shù)據(jù)的 JSON 對(duì)象。數(shù)據(jù)可以按您的需要使用：使用HTML為Web客戶端呈現(xiàn)、為移動(dòng)應(yīng)用程序本機(jī)呈現(xiàn)、為Facebook即時(shí)文章或google AMP創(chuàng)建標(biāo)記、生成音頻版本等等。干凈的數(shù)據(jù)對(duì)于后端的清理、驗(yàn)證和處理非常有用。
3. 瀏覽器支持: Edge 12+ / Firefox 18+ / Chrome 49+ / Safari 10+ / Safari 10+ / Opera 36

wangEditor： 國(guó)內(nèi)開發(fā)者的輕量級(jí)web富文本框

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

使用起來(lái)很方便

基于javascript和css開發(fā)的 Web富文本編輯器， 輕量、簡(jiǎn)潔、易用、開源免費(fèi)，創(chuàng)建編輯器時(shí)只需要引用 JS，無(wú)需引用任何 CSS。

菜單和編輯區(qū)域其實(shí)就是兩個(gè)單獨(dú)的<div>，位置、尺寸都可以隨便定義。如果想要像 知乎專欄、簡(jiǎn)書、石墨、網(wǎng)易云筆記 這些編輯頁(yè)面一樣，將編輯區(qū)域和菜單分離就可以實(shí)現(xiàn)了。

菜單和編輯器區(qū)域可自定義樣式。例如：將菜單fixed、編輯器區(qū)域高度自動(dòng)增加等

編輯區(qū)域和菜單分離

summernote：Bootstrap 可視化HTML編輯器

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

summernote Demo

summernote是一個(gè)簡(jiǎn)單靈活的所見(jiàn)即所得的 HTML 在線編輯器.

1. 支持Bootstrap3.x.x到4.x.x；輕量（js+css:100Kb）
2. 適用于所有主要瀏覽器：Safari、Chrome、Firefox、Opera、Edge和Internet Explorer 9+
3. 適用于所有主要操作系統(tǒng)：windows、macOS、linux

tinymce

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

TinyMCE 5

項(xiàng)目社區(qū)開源版 - Free Forever

1. 可定制的UI與功能：TinyMCE 5可以進(jìn)行定制以適合系統(tǒng)，從而無(wú)縫融入既有設(shè)計(jì)。使用者可以專注于產(chǎn)品設(shè)計(jì)。
2. 提高用戶滿意度：可以在更短的時(shí)間內(nèi)完成更多工作。實(shí)踐證明，TinyMCE 5每年可為內(nèi)容創(chuàng)建者節(jié)省數(shù)千個(gè)小時(shí)，同時(shí)增加了用戶參與度。

tiptap：基于Vue.js的無(wú)渲染富文本編輯器

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

Base on：Prosemirror

basic example of tiptap

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

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

如果有其他想推薦的編輯器可以留言回復(fù)我哦！

其實(shí)原本還有個(gè)項(xiàng)目也在分享的List中-Pell, 可以說(shuō)是 最簡(jiǎn)單，最小的WYSIWYG文本編輯器

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

簡(jiǎn)單到?jīng)]有多余的語(yǔ)言來(lái)介紹

引用官網(wǎng)的一句介紹吧：DOWNLOAD / INSTRUCTIONS / INFORMATION view on Github

起初納悶為啥這么多stars，那么久沒(méi)更新，看了看項(xiàng)目就明白了：至簡(jiǎn)如水，過(guò)多的包裝都是浪費(fèi)。