天天看點

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,确實有幾分感覺。

GitHub 上的開源前端編輯器

除了這個編輯器之外,該團隊還開源過其他幾個有意思的 Web 項目,不過受限于今天的分享主題,在此按下不表。有興趣的了解的同學可以到他們官網上去看一看,位址等下會一并放到背景。

GitHub 上的開源前端編輯器

同時,editor.js 也提供了一些友善使用者使用的快捷鍵,如果你對他們所提供的快捷鍵不是很滿意,也可自行定制。

GitHub 上的開源前端編輯器

總的來說,這款編輯器通過對「塊」的操控,提升了對大塊内容的編輯效率,也使得内容的組織看起來更加清晰與規範,還是蠻有創意的。

有人評論說這款編輯器挺像 Notion,你也可以對比看看。

2、Simditor

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

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

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

GitHub 上的開源前端編輯器

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

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

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

3、Summer Note

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

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

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

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

GitHub 上的開源前端編輯器

4、wangEditor

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

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

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

GitHub 上的開源前端編輯器

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 上的開源前端編輯器

今天給大家推薦的幾個編輯器,各有其優缺點,雖然 GitHub 上還有其它功能更為強大的編輯器,但我覺得上面幾個應該基本就能滿足内容操作網站的日常使用需求了。

來源:GitHubDaily

GitHub 上的開源前端編輯器

歡迎關注我的公衆号:【程式設計資源庫】 ,關注後回複“我來自網際網路”即可領取2000G視訊教程

繼續閱讀