社区产品经理必看的编辑器产品设计指南

编辑导语：每个内容网站或者社区类产品都有编辑器，有的是自己开发，有的是基于开源编辑器开发；编辑器的难易程度以及一些细节设计是非常需要关注的点，因为对于用户来说，一个好用的编辑器是尤为重要的；本文作者分享了关于编辑器的产品设计指南，我们一起来了解一下。

一、编辑器科普

1. PC编辑器和移动端编辑器

一个社区产品拥有一款自研的编辑器或者基于开源编辑器深度定制开发，绝对是社区核心技术之一，国内几大社区均拥有自己核心的编辑器，如知乎、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的标签与编辑器的底层标签进行一一映射，达到基本一致的格式和排版效果。

4. 定时保存/草稿箱/预览/发布

这四个功能都与最终发布相关联，前三者都是非必须功能，产品经理视业务需求来定是否加上来增加体验。

1）一般编辑器都会加上定时保存，以防用户出现突然断电断网等意外情况，常规3-5s触发一次定时保存即可，这个保存有存在本地，也有存服务端。

如果同时具备草稿箱功能，那么一般会选择定时保存到服务端，而不是存在用户本地；有定时保存也会有手动保存的入口，手动来触发存草稿的操作。

2）草稿箱实际为定时保存的地方，为了将多个定时保存的内容区分开，会将草稿设定ID；例如B站会在用户离开编辑器再回来的时候，会提示用户是否继续编辑，继续编辑则取的上一个定时保存是的草稿，否的话则是新建草稿ID，原保存的内容进入到草稿箱。

3）预览功能非常常见，为了看排版后到PC和手机端的实际效果，产品经理往往会设计预览的功能；这里只有一个注意点，预览需要按照实际内容展示时的渲染逻辑进行，而不是继续按编辑器内的逻辑套一层“手机壳”的UI。

4）发布功能是各个平台自身深度定制的功能，发布前的正则校验，发布中的服务端各类限制逻辑校验；往往会对发布者的身份、所发内容所在的版块、发布者的权限等进行校验，以及发布后对接的审核，这些都是业务设定的发布门槛。

针对社区产品，发布门槛的合理设定有利于社区氛围的建设。

三、总结

• 编辑器没那么简单，Markdown编辑器有标准标记语言，因此利于编辑器间的兼容，富文本编辑器是目前的主流，web编辑器含金量最高，契合用户编辑深度内容的场景。
• 上传图片需要考虑扩大图片上传的入口，提升用户体验。上传视频讲究比较多，注意格式、预播、封面截帧、二次上传、压缩和全球加速。
• 插入超链一定要做限制，注意防攻击，尽量枚举清楚超链的协议，以支持全部的业务场景。
• Word文档导入实现方式多种多样，但都无法100%还原所有Word排版，因此最好适用编辑器自身的草稿箱功能，让编辑的内容直接存在草稿箱而不在用户本地的word文档中。
• 定时保存、草稿箱、预览，以及上文未提及的定时发布、内容标签等均都是锦上添花的好功能，在编辑器本身硬核能力强的前提上增加这些功能将极大提升用户体验。

一个好的编辑器，绝对是以内容创作和消费为主的平台所必须的利器，给内容创作者一个舒心的编辑器才能更好地输出内容。

 

作者：全导，微信公众号：零向度（lingxiangdu）

本文由 @全导 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash ，基于 CC0 协议