GitHub 上的開源前端編輯器

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

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

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

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

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

1、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,你也可以對比看看。

2、Simditor

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

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

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

由上面截圖你可以看出,這個編輯器支持了當前主流編輯器的所有功能,放到項目裏面使用基本都能滿足需求。

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

如果還嫌不夠,你也可以自行研發,官方提供了一套 API,方便開發者定製產品。

3、Summer Note

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

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

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

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

4、wangEditor

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

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

官網上面中文文檔的配套相對齊全,如果你看英文文檔比較吃力,那麼可以嘗試下這個項目。

5、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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章