越來越多的CMS網站、商城浮出水面，社區論壇、博客、Wiki、電子郵件等産品層出不窮，需要用上編輯器的地方越來越多，那麼作為産品的我們對編輯器該要有怎麼樣的一個認知？

一、編輯器有多少類？

1. 富文本編輯器

滿足基本文字樣式、圖片和視頻編輯，上手快，操作便捷非常簡單。但同時格式簡單，是它的優點也是缺點，過于簡單有些高階樣式無法滿足。比如：“引用樣式”、“流程圖”、“代碼塊”等。如常見的“百度貼吧”、“百度百科”、“中關村在線”等待。

2. markdown編輯器

滿足高階編輯樣式，對于深度的編輯用戶用上markdown編輯器簡直是如虎添翼。但學習需要一定成本，不同網站具體的markdown語法還不一樣，但輸出效果是一緻的。

其次markdown語法在中文輸入上沒有想象的那麼便利，你需要不斷在中英文間進行切換，這對英文來說具有先天優勢，但對中文，确實體驗一般，如：“人人都是産品經理”、“石墨文檔”等等，以及我的個人網站的文章都是由markdown編輯器渲染出來。

二、哪類編輯器合适你？

主要圍繞以下3點進行深度思考：

1. 效率

用戶通過富文本／markdown編輯器， 能否讓編輯這件事情上相對更快捷，更有效率。

2. 體驗

是否提升用戶體驗，至少是不破壞用戶體驗。

3. 成本

是否提升成本效率和體驗都會提升？

具象點來說，富文本相當于美顔相機用起來方便快捷一鍵美顔，而markdown相當于photoshop相對較深度用戶可以發揮出最大作用。結合上面“三要素”并與自身業務場景及用戶屬性進行選擇，>沒有好與不好，隻有合适不合适。

魚和熊掌不可兼得？我全都要行嗎？

行，如簡書“一鍵切換”富文本和markdown編輯器。想兼容并維護兩者實屬不易，極有可能導緻樣式錯亂。簡書是一個内容創作平台，内容創作是核心，故保留兩種編輯器類型。

編輯器原理是将使用者輸入的文字，通過編輯器後使文字擁有樣式，最終輸出帶格式的文字。富文本和markdown編輯器輸出文字的格式不一樣，所以切換時導緻輸出樣式不一。

三、多端适配與開源問題

pc端和移動端尺寸不一樣，編輯器組件及UI上需要分端區分，2種設備無法保證呈現效果一樣。既能支持網頁端又能完美支持移動端端編輯器并不多。

所以做移動端産品千萬别認為：“那個xx編輯器不是很不錯挺多人用的？直接放在我們app就好了。”

開發哥哥，我要這款編輯器。

在一個産品社區看到一個問題——“有什麼優秀的編輯器推薦？”

有人回答，“微信公衆号編輯器”、“微信第三方圖文編輯器”、“簡書編輯器”優秀是毋庸置疑，别人在用的東西不是說接就能接，總不能讓你們開發小哥開發一款和“微信公衆号編輯器”一摸一樣的産品？

開源的編輯器和不開源的編輯器區别在哪？>

• 開源即拿到編輯器源碼，可以免費使用相關功能及修改源碼進行二次開發。>
• 不開源，可以免費或者付費使用編輯器相關功能，但僅有編輯器所有者才能進行修改更新叠代。

目前開源的編輯器雖然功能衆多，但對于廣大開發者來說，還是有很多定制化的功能需求，例如：添加按鈕、添加樣式、删除不必要的組件等。

四、推薦幾款編輯器

推薦說明：根據市場反饋及開發大佬們的踩坑合集得出的推薦 （僅個人看法），具體詳情請移步至各大編輯器官網進行查看，本次推薦不帶任何編輯器鍊接。

富文本編輯器推薦

（1）UEdito

一款免費開源非常輕量級富文本編輯器，插件比較豐富，多種操作實現自動化，百度貼吧目前就在使用該編輯器。

（2）KindEditor

同樣也是一款免費開源富文本編輯器，每一個功能都是一個插件。配置簡單，還記得剛踏入編程界用的就是KindEditor。整體界面和UEdito非常相似，圖标都比較懷舊。

markdown編輯器推薦

editor.md

全球最大的中文專業it社區 csdb都在用的編輯器，其它多的就不說了。

移動端編輯器推薦

eleditor

一款兼容ios 和android 的免費開源編輯器， 兼容絕大多數移動浏覽器，但有些年代較久的安卓機器不兼容。

本文由 @動物園園長 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部