產(chǎn)品經(jīng)理對(duì)“編輯器”應(yīng)有的認(rèn)知

3 評(píng)論 17643 瀏覽 144 收藏 7 分鐘

越來越多的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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 富文本編輯器所說的缺點(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)景我站富文本編輯器。

    來自廣東 回復(fù)
    1. 一個(gè)網(wǎng)站的Markdown 語法5分鐘上手, 10個(gè)呢?20個(gè)? 每個(gè)網(wǎng)站對(duì)Markdown語法都有差異,這就是成本

      來自廣東 回復(fù)
  2. 編輯器即將文字等樣式化輸出,富文本編輯器就像傻瓜相機(jī)一鍵按下拍照,markdown編輯器就如同數(shù)碼相機(jī)需要一定的專業(yè)知識(shí)和能力才能操作運(yùn)用熟練。

    回復(fù)