編輯導語:每個內容網站或者社區類產品都有編輯器,有的是自己開發,有的是基於開源編輯器開發;編輯器的難易程度以及一些細節設計是非常需要關注的點,因為對於用户來説,一個好用的編輯器是尤為重要的;本文作者分享了關於編輯器的產品設計指南,我們一起來了解一下。
一個社區產品擁有一款自研的編輯器或者基於開源編輯器深度定製開發,絕對是社區核心技術之一,國內幾大社區均擁有自己核心的編輯器,如知乎、B站、虎撲、豆瓣、簡書、CSDN等等;還有諸多以編輯器為核心的產品,如印象筆記、有道雲筆記、石墨文檔、Word、WPS等等。
互聯網世界每一個編輯器都不一樣,都是基於自身業務進行的定製設計。
Word和WPS可以説是桌面客户端中總統山級別的富文本編輯器,功能強大到其他編輯器需要支持Word導入。
但是在web端,用户並不需要強大到如Word一般的編輯器,簡潔的頁面,方便的交互,以及融入業務功能的輕量級富文本編輯器才是更受歡迎的選擇;這裏的代表產品便是Google Docs。移動端的編輯需要更加簡潔,基本統一默認模板,不會開放更多自定義屬性。
內容發佈者在移動端和web端的創作場景也不一樣,移動端發佈的內容大多簡短,簡單圖片配文字或者一個視頻;而PC擁有更好的創作環境,相對深度長篇的內容大多還是選擇web編輯器,因此本文主要針對更有含金量的web編輯器進行詳述。
無論PC還是移動端編輯器,基本上都會比Word簡單很多,保留常用的富文本編輯功能,支持圖片、視頻等多媒體資源,同時能夠定時保存或者多人協同編輯。
通用的字體、字號、顏色、行間距、下劃線等功能編輯器都基本一樣,不會有太大區別,這些筆者將其稱為“基礎功能”;而定製的功能(不是每個編輯器都有),例如投票、定時保存、定時發佈、視頻截幀、所見即所得等等,筆者將其稱為“業務功能”,用户經常吐槽的編輯器難用絕大多數都是吐槽“業務功能”。
2. 富文本編輯器和Markdown編輯器富文本編輯器和Markdown編輯器是社區產品經理一定要了解的,涉及到編輯器選型、支持策略甚至運營策略。
互聯網世界最早出現的是文本編輯器,只能支持純文本的複製粘貼功能;隨着技術的發展,圖片、視頻等資源需要融入到編輯器中,加上各類格式和排版,於是就有了富文本編輯器,我們目前所接觸到的編輯器絕大多數都是富文本編輯器。
Markdown編輯器與富文本編輯器功能上沒什麼區別,只是Markdown編輯器使用一套標記語言來進行排版,非常多的應用在偏技術分析的一些社區論壇;比如CSDN的編輯器就是典型的Markdown編輯器,簡書之前也使用Markdown,但後來轉向成富文本編輯器作為主體,可能也是內容發生了一定轉變。
CSDN的Markdown編輯器
知乎的富文本編輯器
Markdown編輯器有一套標準的標記語言,使得編輯器之間交流起來非常方便,也利於推廣。
一個Markdown編輯器的內容粘貼到任何支持Markdown的編輯器中都不會出現格式的錯亂,而富文本編輯器之間交流,往往會出現格式混亂的問題;比如編輯經常遇到的粘貼Word內容到某個編輯器內,各種格式丟失,排版錯亂,完全不像Word中的排版樣式;這個就是因為富文本編輯器沒有統一的格式標準,基本都是定製開發,粘貼的內容在寫入數據庫時會按照自己的規則來進行,這就會出現排版錯亂。
目前Markdown雖然有些流行起來, 但仍然還是小眾編輯器,還有很長的路要走;兩類編輯器各有優劣和應用場景,如果是做技術社區類的產品,編輯器一定需要支持Markdown。
經過以上的解讀,基本可以知道編輯器並不是隨便網上找個開源的改改就行的,能夠支持word複製粘貼到編輯器也並非那麼簡單的功能,都是需要經過定製開發才具備的能力。
二、編輯器四類核心功能產品設計根據不同的業務場景,編輯器需要具備的功能各有不同,產品經理在梳理業務的過程中時需要有針對性的設計產品功能,以契合業務的發展。
1. 上傳圖片/視頻上傳圖片和視頻看似每個編輯器都有,但實際都是經過定製的業務功能;首先看業務的發展是否需要對視頻內容獨立運作,由此衍生出圖文混排、圖文視頻混排、獨立視頻發佈三種場景。
典型的圖文帖如虎撲、懂球帝這類以文字為主的社區產品,編輯器大多支持到圖文混排即可(實際為底層的帖子類型是否支持視頻展示),針對視頻內容大多走獨立的視頻發佈邏輯,僅有視頻內容、視頻標題和簡介。
微信公眾號、知乎這類平台大多都支持圖文視頻混排,以豐富其內容展現形式;而B站、西瓜這類以視頻為主的平台在獨立視頻發佈邏輯之外,又對視頻功能進行了精深的定製優化。
圖片上傳功能主要的注意點在於對圖片的上傳場景支持力度,一般流程是點擊編輯器圖片上傳按鈕,選中本地的圖片,然後走上傳流程,經過雲壓縮後落庫,得到業務域名下的圖片。
進入上傳流程之後都是一樣的,一個好用的編輯器會將上傳前的場景擴大,例如:
- 直接複製本地圖片,粘貼到編輯器中,讀取到本地地址直接進入上傳流程;
- 本地的圖片直接拖拽到編輯器中,編輯器讀取到本地地址直接進入上傳流程;
- 截屏得到某張圖片暫時放在剪貼板中,粘貼到編輯器中,讀取剪貼板內容直接進入上傳流程;
- 複製一張網絡中的圖片(圖片無防盜鏈),粘貼到編輯器中,前端解析網絡地址溯源後直接將圖片上傳服務器獲得業務域名下的圖片地址;此功能看到的圖片與網絡圖片一樣,但是實際域名已經發生變化。
- 針對特殊的gif圖片,常見的問題是隻上傳了首幀圖片(圖片沒有動),編輯器需要支持分解成多幀上傳。
視頻上傳的學問更多,B站、知乎、抖音這些視頻上傳都是行業內的領先者,視頻上傳的最基礎流程是視頻切片,分片上傳雲端,轉碼後落庫;一般轉碼後會轉成播放器能夠支持的視頻流格式,以方便對視頻進行統一維護。
在視頻上傳方面,有很多細節的點值得產品學習:
- 視頻上傳時在編輯器中能夠播放,實際上是讀取的視頻本地地址,播放的實際為本地視頻,並非上傳後轉碼的視頻;
- 視頻上傳時前端能夠做到截取指定幀,或者服務端截取指定幀,給到用户選擇封面,同時也開放給用户自定義封面上傳,例如B站的視頻上傳就有該功能;
- 同一視頻第二次上傳時,不再走上傳流程,而走讀取流程,即使改了視頻名字依舊可以識別出是視頻庫中哪條視頻;知乎的視頻上傳具備該項功能,具體如何實現不得而知,猜測是視頻轉譯為唯一的二進制編碼,在第二次上傳時候先做這層轉譯,與庫中視頻匹配,若能匹配上則直接提取該視頻展示;
- 優秀的視頻上傳功能應當支持儘可能多的視頻格式,且在保證畫質的基礎上儘可能壓縮視頻大小;
- 如果業務場景中有比較多的海外創作者需要使用視頻上傳,如果未經處理的話大多上傳速度會遠遠慢於國內,這是需要將視頻通過海外鏈路加速傳至國內,阿里雲、騰訊雲均具備這樣的能力,即阿里雲的全球加速鏈路(現海外鏈路加速服務)。
知乎的視頻分片上傳
不見得圖片/視頻上傳所有功能都需要具備,根據自身業務場景考量來最大限度優化圖片/視頻上傳體驗,這個是產品經理必須具備的能力。
2. 解析外鏈/插入超鏈除了本地上傳視頻之外,經常會出現的一種場景就行運營希望支持直接插入外鏈的視頻;比如運營在微博發了一條視頻,希望直接在編輯器中插入微博視頻的鏈接就可以播放;這樣的需求本身是合理的,可以較大的提高運營的效率,也可以給普通用户更多元的視頻上傳選擇。
這樣的需求一般需要藉助爬蟲,解析插入的外鏈之後去爬取源視頻,然後走上文所説的視頻上傳轉碼流程,這樣才能夠確保視頻是自家播放器能夠支持的視頻流,否則經常會出現插入的外鏈視頻但是播放器播不了。
插入超鏈這個功能非常簡單,但是筆者踩過的坑不少,值得單獨拎出來解讀一下;超鏈的基本原理就是一個簡單的a標籤,但是往往會成為被攻擊的重災區:
首先,插入的超鏈協議肯定不止https和http,在App端打開的頁面往往都是schema的形式,有自家的協議頭,所以再產品設計上對於超鏈協議的支持是需要梳理的,最好是窮舉完協議頭。
其次,圖片、動圖、視頻是不允許插入超鏈的,不能在img標籤和video標籤外面再套一層a標籤,否則會出現一種攻擊現象——用户看到一張標識的gif動圖沒有動,會下意識的點擊一下讓動圖動起來,這時候實際先觸發的是外層a標籤,將按超鏈的地址跳轉,不受平台控制。
最後,文字鏈攻擊行為數不勝數,一般會建立黑名單系統,黑名單中的域名服務端進行過濾。
3. Word文檔導入Word導入功能是每個運營都希望擁有的編輯器功能之一,特別是在不具備草稿箱功能的情況下,Word導入能夠讓運營或者用户將本地的文檔內容直接拷貝到編輯器內,格式排版不變的話直接點擊發布就結束。
但是Word文檔導入很少有能夠做到盡善盡美的,原因在於Word也分03、07、13、16等等多個版本,格式也分doc和docx,外加還有WPS的一整套體系,要做到完美支持成本非常大。
Word導入實際上也分為兩種場景:
- 複製word文檔的內容粘貼到編輯器中,這裏粘貼過來是前端需要解析剪貼板裏的內容(實際為標籤),將其解析為編輯器對應的格式。
- 直接導入文檔,原理也是解析word文檔,word的標籤與編輯器的底層標籤進行一一映射,達到基本一致的格式和排版效果。
這四個功能都與最終發佈相關聯,前三者都是非必須功能,產品經理視業務需求來定是否加上來增加體驗。
1)一般編輯器都會加上定時保存,以防用户出現突然斷電斷網等意外情況,常規3-5s觸發一次定時保存即可,這個保存有存在本地,也有存服務端。
如果同時具備草稿箱功能,那麼一般會選擇定時保存到服務端,而不是存在用户本地;有定時保存也會有手動保存的入口,手動來觸發存草稿的操作。
2)草稿箱實際為定時保存的地方,為了將多個定時保存的內容區分開,會將草稿設定ID;例如B站會在用户離開編輯器再回來的時候,會提示用户是否繼續編輯,繼續編輯則取的上一個定時保存是的草稿,否的話則是新建草稿ID,原保存的內容進入到草稿箱。
3)預覽功能非常常見,為了看排版後到PC和手機端的實際效果,產品經理往往會設計預覽的功能;這裏只有一個注意點,預覽需要按照實際內容展示時的渲染邏輯進行,而不是繼續按編輯器內的邏輯套一層“手機殼”的UI。
4)發佈功能是各個平台自身深度定製的功能,發佈前的正則校驗,發佈中的服務端各類限制邏輯校驗;往往會對發佈者的身份、所發內容所在的版塊、發佈者的權限等進行校驗,以及發佈後對接的審核,這些都是業務設定的發佈門檻。
針對社區產品,發佈門檻的合理設定有利於社區氛圍的建設。
三、總結- 編輯器沒那麼簡單,Markdown編輯器有標準標記語言,因此利於編輯器間的兼容,富文本編輯器是目前的主流,web編輯器含金量最高,契合用户編輯深度內容的場景。
- 上傳圖片需要考慮擴大圖片上傳的入口,提升用户體驗。上傳視頻講究比較多,注意格式、預播、封面截幀、二次上傳、壓縮和全球加速。
- 插入超鏈一定要做限制,注意防攻擊,儘量枚舉清楚超鏈的協議,以支持全部的業務場景。
- Word文檔導入實現方式多種多樣,但都無法100%還原所有Word排版,因此最好適用編輯器自身的草稿箱功能,讓編輯的內容直接存在草稿箱而不在用户本地的word文檔中。
- 定時保存、草稿箱、預覽,以及上文未提及的定時發佈、內容標籤等均都是錦上添花的好功能,在編輯器本身硬核能力強的前提上增加這些功能將極大提升用户體驗。
一個好的編輯器,絕對是以內容創作和消費為主的平台所必須的利器,給內容創作者一個舒心的編輯器才能更好地輸出內容。
作者:全導,微信公眾號:零向度(lingxiangdu)
本文由 @全導 原創發佈於人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash ,基於 CC0 協議