編輯導(dǎo)語(yǔ)：每個(gè)內(nèi)容網(wǎng)站或者社區(qū)類(lèi)產(chǎn)品都有編輯器，有的是自己開(kāi)發(fā)，有的是基于開(kāi)源編輯器開(kāi)發(fā)；編輯器的難易程度以及一些細(xì)節(jié)設(shè)計(jì)是非常需要關(guān)注的點(diǎn)，因?yàn)閷?duì)于用戶(hù)來(lái)說(shuō)，一個(gè)好用的編輯器是尤為重要的；本文作者分享了關(guān)于編輯器的產(chǎn)品設(shè)計(jì)指南，我們一起來(lái)了解一下。

一、編輯器科普

1. PC編輯器和移動(dòng)端編輯器

一個(gè)社區(qū)產(chǎn)品擁有一款自研的編輯器或者基于開(kāi)源編輯器深度定制開(kāi)發(fā)，絕對(duì)是社區(qū)核心技術(shù)之一，國(guó)內(nèi)幾大社區(qū)均擁有自己核心的編輯器，如知乎、B站、虎撲、豆瓣、簡(jiǎn)書(shū)、CSDN等等；還有諸多以編輯器為核心的產(chǎn)品，如印象筆記、有道云筆記、石墨文檔、Word、WPS等等。

互聯(lián)網(wǎng)世界每一個(gè)編輯器都不一樣，都是基于自身業(yè)務(wù)進(jìn)行的定制設(shè)計(jì)。

Word和WPS可以說(shuō)是桌面客戶(hù)端中總統(tǒng)山級(jí)別的富文本編輯器，功能強(qiáng)大到其他編輯器需要支持Word導(dǎo)入。

但是在web端，用戶(hù)并不需要強(qiáng)大到如Word一般的編輯器，簡(jiǎn)潔的頁(yè)面，方便的交互，以及融入業(yè)務(wù)功能的輕量級(jí)富文本編輯器才是更受歡迎的選擇；這里的代表產(chǎn)品便是Google Docs。移動(dòng)端的編輯需要更加簡(jiǎn)潔，基本統(tǒng)一默認(rèn)模板，不會(huì)開(kāi)放更多自定義屬性。

內(nèi)容發(fā)布者在移動(dòng)端和web端的創(chuàng)作場(chǎng)景也不一樣，移動(dòng)端發(fā)布的內(nèi)容大多簡(jiǎn)短，簡(jiǎn)單圖片配文字或者一個(gè)視頻；而PC擁有更好的創(chuàng)作環(huán)境，相對(duì)深度長(zhǎng)篇的內(nèi)容大多還是選擇web編輯器，因此本文主要針對(duì)更有含金量的web編輯器進(jìn)行詳述。

無(wú)論P(yáng)C還是移動(dòng)端編輯器，基本上都會(huì)比Word簡(jiǎn)單很多，保留常用的富文本編輯功能，支持圖片、視頻等多媒體資源，同時(shí)能夠定時(shí)保存或者多人協(xié)同編輯。

通用的字體、字號(hào)、顏色、行間距、下劃線等功能編輯器都基本一樣，不會(huì)有太大區(qū)別，這些筆者將其稱(chēng)為“基礎(chǔ)功能”；而定制的功能（不是每個(gè)編輯器都有），例如投票、定時(shí)保存、定時(shí)發(fā)布、視頻截幀、所見(jiàn)即所得等等，筆者將其稱(chēng)為“業(yè)務(wù)功能”，用戶(hù)經(jīng)常吐槽的編輯器難用絕大多數(shù)都是吐槽“業(yè)務(wù)功能”。

2. 富文本編輯器和Markdown編輯器

富文本編輯器和Markdown編輯器是社區(qū)產(chǎn)品經(jīng)理一定要了解的，涉及到編輯器選型、支持策略甚至運(yùn)營(yíng)策略。

互聯(lián)網(wǎng)世界最早出現(xiàn)的是文本編輯器，只能支持純文本的復(fù)制粘貼功能；隨著技術(shù)的發(fā)展，圖片、視頻等資源需要融入到編輯器中，加上各類(lèi)格式和排版，于是就有了富文本編輯器，我們目前所接觸到的編輯器絕大多數(shù)都是富文本編輯器。

Markdown編輯器與富文本編輯器功能上沒(méi)什么區(qū)別，只是Markdown編輯器使用一套標(biāo)記語(yǔ)言來(lái)進(jìn)行排版，非常多的應(yīng)用在偏技術(shù)分析的一些社區(qū)論壇；比如CSDN的編輯器就是典型的Markdown編輯器，簡(jiǎn)書(shū)之前也使用Markdown，但后來(lái)轉(zhuǎn)向成富文本編輯器作為主體，可能也是內(nèi)容發(fā)生了一定轉(zhuǎn)變。

CSDN的Markdown編輯器

知乎的富文本編輯器

Markdown編輯器有一套標(biāo)準(zhǔn)的標(biāo)記語(yǔ)言，使得編輯器之間交流起來(lái)非常方便，也利于推廣。

一個(gè)Markdown編輯器的內(nèi)容粘貼到任何支持Markdown的編輯器中都不會(huì)出現(xiàn)格式的錯(cuò)亂，而富文本編輯器之間交流，往往會(huì)出現(xiàn)格式混亂的問(wèn)題；比如編輯經(jīng)常遇到的粘貼Word內(nèi)容到某個(gè)編輯器內(nèi)，各種格式丟失，排版錯(cuò)亂，完全不像Word中的排版樣式；這個(gè)就是因?yàn)楦晃谋揪庉嬈鳑](méi)有統(tǒng)一的格式標(biāo)準(zhǔn)，基本都是定制開(kāi)發(fā)，粘貼的內(nèi)容在寫(xiě)入數(shù)據(jù)庫(kù)時(shí)會(huì)按照自己的規(guī)則來(lái)進(jìn)行，這就會(huì)出現(xiàn)排版錯(cuò)亂。

目前Markdown雖然有些流行起來(lái)， 但仍然還是小眾編輯器，還有很長(zhǎng)的路要走；兩類(lèi)編輯器各有優(yōu)劣和應(yīng)用場(chǎng)景，如果是做技術(shù)社區(qū)類(lèi)的產(chǎn)品，編輯器一定需要支持Markdown。

經(jīng)過(guò)以上的解讀，基本可以知道編輯器并不是隨便網(wǎng)上找個(gè)開(kāi)源的改改就行的，能夠支持word復(fù)制粘貼到編輯器也并非那么簡(jiǎn)單的功能，都是需要經(jīng)過(guò)定制開(kāi)發(fā)才具備的能力。

二、編輯器四類(lèi)核心功能產(chǎn)品設(shè)計(jì)

根據(jù)不同的業(yè)務(wù)場(chǎng)景，編輯器需要具備的功能各有不同，產(chǎn)品經(jīng)理在梳理業(yè)務(wù)的過(guò)程中時(shí)需要有針對(duì)性的設(shè)計(jì)產(chǎn)品功能，以契合業(yè)務(wù)的發(fā)展。

1. 上傳圖片/視頻

上傳圖片和視頻看似每個(gè)編輯器都有，但實(shí)際都是經(jīng)過(guò)定制的業(yè)務(wù)功能；首先看業(yè)務(wù)的發(fā)展是否需要對(duì)視頻內(nèi)容獨(dú)立運(yùn)作，由此衍生出圖文混排、圖文視頻混排、獨(dú)立視頻發(fā)布三種場(chǎng)景。

典型的圖文帖如虎撲、懂球帝這類(lèi)以文字為主的社區(qū)產(chǎn)品，編輯器大多支持到圖文混排即可（實(shí)際為底層的帖子類(lèi)型是否支持視頻展示），針對(duì)視頻內(nèi)容大多走獨(dú)立的視頻發(fā)布邏輯，僅有視頻內(nèi)容、視頻標(biāo)題和簡(jiǎn)介。

微信公眾號(hào)、知乎這類(lèi)平臺(tái)大多都支持圖文視頻混排，以豐富其內(nèi)容展現(xiàn)形式；而B(niǎo)站、西瓜這類(lèi)以視頻為主的平臺(tái)在獨(dú)立視頻發(fā)布邏輯之外，又對(duì)視頻功能進(jìn)行了精深的定制優(yōu)化。

圖片上傳功能主要的注意點(diǎn)在于對(duì)圖片的上傳場(chǎng)景支持力度，一般流程是點(diǎn)擊編輯器圖片上傳按鈕，選中本地的圖片，然后走上傳流程，經(jīng)過(guò)云壓縮后落庫(kù)，得到業(yè)務(wù)域名下的圖片。

進(jìn)入上傳流程之后都是一樣的，一個(gè)好用的編輯器會(huì)將上傳前的場(chǎng)景擴(kuò)大，例如：

• 直接復(fù)制本地圖片，粘貼到編輯器中，讀取到本地地址直接進(jìn)入上傳流程；
• 本地的圖片直接拖拽到編輯器中，編輯器讀取到本地地址直接進(jìn)入上傳流程；
• 截屏得到某張圖片暫時(shí)放在剪貼板中，粘貼到編輯器中，讀取剪貼板內(nèi)容直接進(jìn)入上傳流程；
• 復(fù)制一張網(wǎng)絡(luò)中的圖片（圖片無(wú)防盜鏈），粘貼到編輯器中，前端解析網(wǎng)絡(luò)地址溯源后直接將圖片上傳服務(wù)器獲得業(yè)務(wù)域名下的圖片地址；此功能看到的圖片與網(wǎng)絡(luò)圖片一樣，但是實(shí)際域名已經(jīng)發(fā)生變化。
• 針對(duì)特殊的gif圖片，常見(jiàn)的問(wèn)題是只上傳了首幀圖片（圖片沒(méi)有動(dòng)），編輯器需要支持分解成多幀上傳。

視頻上傳的學(xué)問(wèn)更多，B站、知乎、抖音這些視頻上傳都是行業(yè)內(nèi)的領(lǐng)先者，視頻上傳的最基礎(chǔ)流程是視頻切片，分片上傳云端，轉(zhuǎn)碼后落庫(kù)；一般轉(zhuǎn)碼后會(huì)轉(zhuǎn)成播放器能夠支持的視頻流格式，以方便對(duì)視頻進(jìn)行統(tǒng)一維護(hù)。

在視頻上傳方面，有很多細(xì)節(jié)的點(diǎn)值得產(chǎn)品學(xué)習(xí)：

• 視頻上傳時(shí)在編輯器中能夠播放，實(shí)際上是讀取的視頻本地地址，播放的實(shí)際為本地視頻，并非上傳后轉(zhuǎn)碼的視頻；
• 視頻上傳時(shí)前端能夠做到截取指定幀，或者服務(wù)端截取指定幀，給到用戶(hù)選擇封面，同時(shí)也開(kāi)放給用戶(hù)自定義封面上傳，例如B站的視頻上傳就有該功能；
• 同一視頻第二次上傳時(shí)，不再走上傳流程，而走讀取流程，即使改了視頻名字依舊可以識(shí)別出是視頻庫(kù)中哪條視頻；知乎的視頻上傳具備該項(xiàng)功能，具體如何實(shí)現(xiàn)不得而知，猜測(cè)是視頻轉(zhuǎn)譯為唯一的二進(jìn)制編碼，在第二次上傳時(shí)候先做這層轉(zhuǎn)譯，與庫(kù)中視頻匹配，若能匹配上則直接提取該視頻展示；
• 優(yōu)秀的視頻上傳功能應(yīng)當(dāng)支持盡可能多的視頻格式，且在保證畫(huà)質(zhì)的基礎(chǔ)上盡可能壓縮視頻大?。?/li>
• 如果業(yè)務(wù)場(chǎng)景中有比較多的海外創(chuàng)作者需要使用視頻上傳，如果未經(jīng)處理的話大多上傳速度會(huì)遠(yuǎn)遠(yuǎn)慢于國(guó)內(nèi)，這是需要將視頻通過(guò)海外鏈路加速傳至國(guó)內(nèi)，阿里云、騰訊云均具備這樣的能力，即阿里云的全球加速鏈路（現(xiàn)海外鏈路加速服務(wù)）。

知乎的視頻分片上傳

不見(jiàn)得圖片/視頻上傳所有功能都需要具備，根據(jù)自身業(yè)務(wù)場(chǎng)景考量來(lái)最大限度優(yōu)化圖片/視頻上傳體驗(yàn)，這個(gè)是產(chǎn)品經(jīng)理必須具備的能力。

2. 解析外鏈/插入超鏈

除了本地上傳視頻之外，經(jīng)常會(huì)出現(xiàn)的一種場(chǎng)景就行運(yùn)營(yíng)希望支持直接插入外鏈的視頻；比如運(yùn)營(yíng)在微博發(fā)了一條視頻，希望直接在編輯器中插入微博視頻的鏈接就可以播放；這樣的需求本身是合理的，可以較大的提高運(yùn)營(yíng)的效率，也可以給普通用戶(hù)更多元的視頻上傳選擇。

這樣的需求一般需要借助爬蟲(chóng)，解析插入的外鏈之后去爬取源視頻，然后走上文所說(shuō)的視頻上傳轉(zhuǎn)碼流程，這樣才能夠確保視頻是自家播放器能夠支持的視頻流，否則經(jīng)常會(huì)出現(xiàn)插入的外鏈視頻但是播放器播不了。

插入超鏈這個(gè)功能非常簡(jiǎn)單，但是筆者踩過(guò)的坑不少，值得單獨(dú)拎出來(lái)解讀一下；超鏈的基本原理就是一個(gè)簡(jiǎn)單的a標(biāo)簽，但是往往會(huì)成為被攻擊的重災(zāi)區(qū)：

首先，插入的超鏈協(xié)議肯定不止https和http，在App端打開(kāi)的頁(yè)面往往都是schema的形式，有自家的協(xié)議頭，所以再產(chǎn)品設(shè)計(jì)上對(duì)于超鏈協(xié)議的支持是需要梳理的，最好是窮舉完協(xié)議頭。

其次，圖片、動(dòng)圖、視頻是不允許插入超鏈的，不能在img標(biāo)簽和video標(biāo)簽外面再套一層a標(biāo)簽，否則會(huì)出現(xiàn)一種攻擊現(xiàn)象——用戶(hù)看到一張標(biāo)識(shí)的gif動(dòng)圖沒(méi)有動(dòng)，會(huì)下意識(shí)的點(diǎn)擊一下讓動(dòng)圖動(dòng)起來(lái)，這時(shí)候?qū)嶋H先觸發(fā)的是外層a標(biāo)簽，將按超鏈的地址跳轉(zhuǎn)，不受平臺(tái)控制。

最后，文字鏈攻擊行為數(shù)不勝數(shù)，一般會(huì)建立黑名單系統(tǒng)，黑名單中的域名服務(wù)端進(jìn)行過(guò)濾。

3. Word文檔導(dǎo)入

Word導(dǎo)入功能是每個(gè)運(yùn)營(yíng)都希望擁有的編輯器功能之一，特別是在不具備草稿箱功能的情況下，Word導(dǎo)入能夠讓運(yùn)營(yíng)或者用戶(hù)將本地的文檔內(nèi)容直接拷貝到編輯器內(nèi)，格式排版不變的話直接點(diǎn)擊發(fā)布就結(jié)束。

但是Word文檔導(dǎo)入很少有能夠做到盡善盡美的，原因在于Word也分03、07、13、16等等多個(gè)版本，格式也分doc和docx，外加還有WPS的一整套體系，要做到完美支持成本非常大。

Word導(dǎo)入實(shí)際上也分為兩種場(chǎng)景：

• 復(fù)制word文檔的內(nèi)容粘貼到編輯器中，這里粘貼過(guò)來(lái)是前端需要解析剪貼板里的內(nèi)容（實(shí)際為標(biāo)簽），將其解析為編輯器對(duì)應(yīng)的格式。
• 直接導(dǎo)入文檔，原理也是解析word文檔，word的標(biāo)簽與編輯器的底層標(biāo)簽進(jìn)行一一映射，達(dá)到基本一致的格式和排版效果。

4. 定時(shí)保存/草稿箱/預(yù)覽/發(fā)布

這四個(gè)功能都與最終發(fā)布相關(guān)聯(lián)，前三者都是非必須功能，產(chǎn)品經(jīng)理視業(yè)務(wù)需求來(lái)定是否加上來(lái)增加體驗(yàn)。

1）一般編輯器都會(huì)加上定時(shí)保存，以防用戶(hù)出現(xiàn)突然斷電斷網(wǎng)等意外情況，常規(guī)3-5s觸發(fā)一次定時(shí)保存即可，這個(gè)保存有存在本地，也有存服務(wù)端。

如果同時(shí)具備草稿箱功能，那么一般會(huì)選擇定時(shí)保存到服務(wù)端，而不是存在用戶(hù)本地；有定時(shí)保存也會(huì)有手動(dòng)保存的入口，手動(dòng)來(lái)觸發(fā)存草稿的操作。

2）草稿箱實(shí)際為定時(shí)保存的地方，為了將多個(gè)定時(shí)保存的內(nèi)容區(qū)分開(kāi)，會(huì)將草稿設(shè)定ID；例如B站會(huì)在用戶(hù)離開(kāi)編輯器再回來(lái)的時(shí)候，會(huì)提示用戶(hù)是否繼續(xù)編輯，繼續(xù)編輯則取的上一個(gè)定時(shí)保存是的草稿，否的話則是新建草稿ID，原保存的內(nèi)容進(jìn)入到草稿箱。

3）預(yù)覽功能非常常見(jiàn)，為了看排版后到PC和手機(jī)端的實(shí)際效果，產(chǎn)品經(jīng)理往往會(huì)設(shè)計(jì)預(yù)覽的功能；這里只有一個(gè)注意點(diǎn)，預(yù)覽需要按照實(shí)際內(nèi)容展示時(shí)的渲染邏輯進(jìn)行，而不是繼續(xù)按編輯器內(nèi)的邏輯套一層“手機(jī)殼”的UI。

4）發(fā)布功能是各個(gè)平臺(tái)自身深度定制的功能，發(fā)布前的正則校驗(yàn)，發(fā)布中的服務(wù)端各類(lèi)限制邏輯校驗(yàn)；往往會(huì)對(duì)發(fā)布者的身份、所發(fā)內(nèi)容所在的版塊、發(fā)布者的權(quán)限等進(jìn)行校驗(yàn)，以及發(fā)布后對(duì)接的審核，這些都是業(yè)務(wù)設(shè)定的發(fā)布門(mén)檻。

針對(duì)社區(qū)產(chǎn)品，發(fā)布門(mén)檻的合理設(shè)定有利于社區(qū)氛圍的建設(shè)。

三、總結(jié)

• 編輯器沒(méi)那么簡(jiǎn)單，Markdown編輯器有標(biāo)準(zhǔn)標(biāo)記語(yǔ)言，因此利于編輯器間的兼容，富文本編輯器是目前的主流，web編輯器含金量最高，契合用戶(hù)編輯深度內(nèi)容的場(chǎng)景。
• 上傳圖片需要考慮擴(kuò)大圖片上傳的入口，提升用戶(hù)體驗(yàn)。上傳視頻講究比較多，注意格式、預(yù)播、封面截幀、二次上傳、壓縮和全球加速。
• 插入超鏈一定要做限制，注意防攻擊，盡量枚舉清楚超鏈的協(xié)議，以支持全部的業(yè)務(wù)場(chǎng)景。
• Word文檔導(dǎo)入實(shí)現(xiàn)方式多種多樣，但都無(wú)法100%還原所有Word排版，因此最好適用編輯器自身的草稿箱功能，讓編輯的內(nèi)容直接存在草稿箱而不在用戶(hù)本地的word文檔中。
• 定時(shí)保存、草稿箱、預(yù)覽，以及上文未提及的定時(shí)發(fā)布、內(nèi)容標(biāo)簽等均都是錦上添花的好功能，在編輯器本身硬核能力強(qiáng)的前提上增加這些功能將極大提升用戶(hù)體驗(yàn)。

一個(gè)好的編輯器，絕對(duì)是以?xún)?nèi)容創(chuàng)作和消費(fèi)為主的平臺(tái)所必須的利器，給內(nèi)容創(chuàng)作者一個(gè)舒心的編輯器才能更好地輸出內(nèi)容。

作者：全導(dǎo)，微信公眾號(hào)：零向度（lingxiangdu）

本文由 @全導(dǎo) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議