GitHub 上的開源前端編輯器

當咱們要開發一個博客、社區、論壇等內容生產平臺的時候，爲用戶挑選一個 UI 優雅簡潔、交互絲滑順暢的文本編輯器老是必不可少的一步。

一個完整的前端文本編輯器，要求前端工程師將設計、交互、編碼、測試、組件化、模塊化、擴展性等各方面問題都綜合考慮到位，用心打造，方能稱得上是一款合格的編輯器。

而待產品完成後，那羣追求極致體驗的前端工程師便會在 GitHub 上開源出本身精心打造的富文本編輯器。你們如同華山論劍通常，紛紛亮出本身的獨門祕技，欲在 GitHub 上爲本身的編輯器爭奪一席之地。

這兩天又有一款開源的編輯器參賽了，這位參賽選手的名字叫 editor.js，具體功能咱們下面細聊。

今天乘此機會，跟你們介紹下 GitHub 上都有哪些優秀的前端編輯器。

一、editor.js

項目地址：http://t.cn/Eipg79A

第一個要聊的，便是最近剛衝上 GitHub Trending 榜的 editor.js 項目。

該項目的研發團隊叫 CodeX ，是由俄羅斯聖光機大學一羣熱愛 Web 開發與設計的學生組成，他們的目標是「make a team with fire in the eyes and idealistic tempers」。

這句話結合他們的 Logo，確實有幾分感受。

除了這個編輯器以外，該團隊還開源過其餘幾個有意思的 Web 項目，不過受限於今天的分享主題，在此按下不表。有興趣的瞭解的同窗能夠到他們官網上去看一看，地址等下會一併放到後臺。

同時，editor.js 也提供了一些方便用戶使用的快捷鍵，若是你對他們所提供的快捷鍵不是很滿意，也可自行定製。

總的來講，這款編輯器經過對「塊」的操控，提高了對大塊內容的編輯效率，也使得內容的組織看起來更加清晰與規範，仍是蠻有創意的。

有人評論說這款編輯器挺像 Notion，你也能夠對比看看。

二、Simditor

項目地址：http://t.cn/8s5dxnt

這個項目是彩程設計團隊從 Tower 項目衍生出來的前端編輯器，定義是「一款簡便易用、所見即所得的編輯器」。

初次在 Ruby China 見到這個項目時，我便被他那清新簡潔的 UI 所吸引，動手嘗試事後，發現一些前端交互效果作的也特別棒。

由上面截圖你能夠看出，這個編輯器支持了當前主流編輯器的全部功能，放到項目裏面使用基本都能知足需求。

另外，它還集成了豐富強大的插件功能，目前支持的有 emoji 表情、自動保存、Markdown 編輯、自動 @ 人、熒光筆等插件。

若是還嫌不夠，你也能夠自行研發，官方提供了一套 API，方便開發者定製產品。

三、Summer Note

項目地址：http://t.cn/RzE2pbN

這是一款基於 Bootstrap 與 jQuery 開發的編輯器。主打簡便安裝、可定製程度高、後端快速集成等特性，但這幾項目前主流的開源編輯器應該都能知足。

從我我的的審美來看，這款編輯器的 UI 也不算特別出衆，將其列在這個推薦表中，主要是由於該項目的知名度較高。

項目知名度高有個好處，就是相對新項目會比較穩定，一些 Bug 修復和瀏覽器的兼容性支持作的會比較好。

四、wangEditor

項目地址：http://t.cn/R7RfuHK

這個項目跟前幾個項目不一樣，它出自國內一名前端工程師之手，而非團隊研發。

官網上面中文文檔的配套相對齊全，若是你看英文文檔比較吃力，那麼能夠嘗試下這個項目。

五、SimpleMDE

項目地址：http://t.cn/Ein03mV

看標題你應該已經知道了，這個項目僅支持 Markdown 編輯。

爲何不用 WYSIWYG（所見即所得）編輯而選用 Markdown 編輯呢？這裏引用下做者在項目中的一段表述：

WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, plus Markdown can be rendered natively on more platforms than HTML. However, Markdown is not a syntax that an average user will be familiar with, nor is it visually clear while editing.

In otherwords, for an unfamiliar user, the syntax they write will make little sense until they click the preview button. SimpleMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax.

因而可知，這個項目面向的是至少對 Markdown 語法有一點了解的用戶。

其實，Markdown 一開始被創造出來，就是爲了給內容創做者提供一種更爲簡潔直觀的文本排版方式，以改變傳統 HTML 那種過於臃腫笨重的排版。而且，如今網上資料齊全，Markdown 入門門檻也並不高，若是你們能舉力推崇 Markdown 的應用，對開發者和用戶來講都算得上是一件大好事。

今天給你們推薦的幾個編輯器，各有其優缺點，雖然 GitHub 上還有其它功能更爲強大的編輯器，但我以爲上面幾個應該基本就能知足內容操做網站的平常使用需求了。

來源：GitHubDaily

歡迎關注個人公衆號：【編程資源庫】 ，關注後回覆「我來自互聯網」便可領取2000G視頻教程