產(chǎn)品經(jīng)理對(duì)“編輯器”應(yīng)有的認(rèn)知
越來越多的CMS網(wǎng)站、商城浮出水面,社區(qū)論壇、博客、Wiki、電子郵件等產(chǎn)品層出不窮,需要用上編輯器的地方越來越多,那么作為產(chǎn)品的我們對(duì)編輯器該要有怎么樣的一個(gè)認(rèn)知?
一、編輯器有多少類?
1. 富文本編輯器
滿足基本文字樣式、圖片和視頻編輯,上手快,操作便捷非常簡(jiǎn)單。但同時(shí)格式簡(jiǎn)單,是它的優(yōu)點(diǎn)也是缺點(diǎn),過于簡(jiǎn)單有些高階樣式無法滿足。比如:“引用樣式”、“流程圖”、“代碼塊”等。如常見的“百度貼吧”、“百度百科”、“中關(guān)村在線”等待。
2. markdown編輯器
滿足高階編輯樣式,對(duì)于深度的編輯用戶用上markdown編輯器簡(jiǎn)直是如虎添翼。但學(xué)習(xí)需要一定成本,不同網(wǎng)站具體的markdown語法還不一樣,但輸出效果是一致的。
其次markdown語法在中文輸入上沒有想象的那么便利,你需要不斷在中英文間進(jìn)行切換,這對(duì)英文來說具有先天優(yōu)勢(shì),但對(duì)中文,確實(shí)體驗(yàn)一般,如:“人人都是產(chǎn)品經(jīng)理”、“石墨文檔”等等,以及我的個(gè)人網(wǎng)站的文章都是由markdown編輯器渲染出來。
二、哪類編輯器合適你?
主要圍繞以下3點(diǎn)進(jìn)行深度思考:
1. 效率
用戶通過富文本/markdown編輯器, 能否讓編輯這件事情上相對(duì)更快捷,更有效率。
2. 體驗(yàn)
是否提升用戶體驗(yàn),至少是不破壞用戶體驗(yàn)。
3. 成本
是否提升成本效率和體驗(yàn)都會(huì)提升?
具象點(diǎn)來說,富文本相當(dāng)于美顏相機(jī)用起來方便快捷一鍵美顏,而markdown相當(dāng)于photoshop相對(duì)較深度用戶可以發(fā)揮出最大作用。結(jié)合上面“三要素”并與自身業(yè)務(wù)場(chǎng)景及用戶屬性進(jìn)行選擇,沒有好與不好,只有合適不合適。
魚和熊掌不可兼得?我全都要行嗎?
行,如簡(jiǎn)書“一鍵切換”富文本和markdown編輯器。想兼容并維護(hù)兩者實(shí)屬不易,極有可能導(dǎo)致樣式錯(cuò)亂。簡(jiǎn)書是一個(gè)內(nèi)容創(chuàng)作平臺(tái),內(nèi)容創(chuàng)作是核心,故保留兩種編輯器類型。
編輯器原理是將使用者輸入的文字,通過編輯器后使文字擁有樣式,最終輸出帶格式的文字。富文本和markdown編輯器輸出文字的格式不一樣,所以切換時(shí)導(dǎo)致輸出樣式不一。
三、多端適配與開源問題
pc端和移動(dòng)端尺寸不一樣,編輯器組件及UI上需要分端區(qū)分,2種設(shè)備無法保證呈現(xiàn)效果一樣。既能支持網(wǎng)頁端又能完美支持移動(dòng)端端編輯器并不多。
所以做移動(dòng)端產(chǎn)品千萬別認(rèn)為:“那個(gè)xx編輯器不是很不錯(cuò)挺多人用的?直接放在我們app就好了?!?/p>
開發(fā)哥哥,我要這款編輯器。
在一個(gè)產(chǎn)品社區(qū)看到一個(gè)問題——“有什么優(yōu)秀的編輯器推薦?”
有人回答,“微信公眾號(hào)編輯器”、“微信第三方圖文編輯器”、“簡(jiǎn)書編輯器”優(yōu)秀是毋庸置疑,別人在用的東西不是說接就能接,總不能讓你們開發(fā)小哥開發(fā)一款和“微信公眾號(hào)編輯器”一摸一樣的產(chǎn)品?
開源的編輯器和不開源的編輯器區(qū)別在哪?
- 開源即拿到編輯器源碼,可以免費(fèi)使用相關(guān)功能及修改源碼進(jìn)行二次開發(fā)。
- 不開源,可以免費(fèi)或者付費(fèi)使用編輯器相關(guān)功能,但僅有編輯器所有者才能進(jìn)行修改更新迭代。
目前開源的編輯器雖然功能眾多,但對(duì)于廣大開發(fā)者來說,還是有很多定制化的功能需求,例如:添加按鈕、添加樣式、刪除不必要的組件等。
四、推薦幾款編輯器
推薦說明:根據(jù)市場(chǎng)反饋及開發(fā)大佬們的踩坑合集得出的推薦 (僅個(gè)人看法),具體詳情請(qǐng)移步至各大編輯器官網(wǎng)進(jìn)行查看,本次推薦不帶任何編輯器鏈接。
富文本編輯器推薦
(1)UEdito?
一款免費(fèi)開源非常輕量級(jí)富文本編輯器,插件比較豐富,多種操作實(shí)現(xiàn)自動(dòng)化,百度貼吧目前就在使用該編輯器。
(2)KindEditor?
同樣也是一款免費(fèi)開源富文本編輯器,每一個(gè)功能都是一個(gè)插件。配置簡(jiǎn)單,還記得剛踏入編程界用的就是KindEditor。整體界面和UEdito非常相似,圖標(biāo)都比較懷舊。
markdown編輯器推薦
editor.md
全球最大的中文專業(yè)it社區(qū) csdb都在用的編輯器,其它多的就不說了。
移動(dòng)端編輯器推薦
eleditor
一款兼容ios 和android 的免費(fèi)開源編輯器, 兼容絕大多數(shù)移動(dòng)瀏覽器,但有些年代較久的安卓機(jī)器不兼容。
本文由 @動(dòng)物園園長(zhǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pexels ,基于 CC0 協(xié)議
富文本編輯器所說的缺點(diǎn)都能被彌補(bǔ),它最大的問題在于過于笨重,維護(hù)上也不便。Markdown的學(xué)習(xí)成本不算高,但Markdown發(fā)布成HTML的時(shí)候,不同的平臺(tái)對(duì)樣式其實(shí)解析上有所差異,有的平臺(tái)不解析md里面的HTML語法,有些部分解析,整體還是不可預(yù)測(cè)的,自己的網(wǎng)站當(dāng)然可以這么做,但是在第三方平臺(tái)使用markdown,你并不知道哪些語法可能不會(huì)被解析,相比于富文本編輯器生成的代碼而言,Markdown還有很長(zhǎng)的路要走。所以在PC場(chǎng)景我站富文本編輯器。
一個(gè)網(wǎng)站的Markdown 語法5分鐘上手, 10個(gè)呢?20個(gè)? 每個(gè)網(wǎng)站對(duì)Markdown語法都有差異,這就是成本
編輯器即將文字等樣式化輸出,富文本編輯器就像傻瓜相機(jī)一鍵按下拍照,markdown編輯器就如同數(shù)碼相機(jī)需要一定的專業(yè)知識(shí)和能力才能操作運(yùn)用熟練。