后台产品设计之编辑器

这是《后台产品设计指南》系列文章的第11篇内容，更多精彩可以点击下方链接查看。

后台产品设计指南

编辑器类型

富文本编辑器

富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，可以帮助用户快速地添加文字、图片、表格等内容并设置格式，最大的优点就是所见即所得。

常见的在线编辑器有135编辑器、壹伴编辑器等；可以集成到后台的富文本编辑器有UEditor、wangEditor等。需要说明的是不同平台的富文本编辑器在支持的样式上有细微的区别，不同平台都根据自己的业务做了调整，比如财经网站上的编辑器就增加了股票选择功能。

粗体、斜体、删除线、引用这些属于比较常规的功能，这里选取几个相对复杂的功能和大家讲解一下。

1.上传图片

用户上传的图片需要经过平台压缩处理，保证在前台能尽快地加载出来。这个上传可以是点击上传按钮进行上传，直接复制本地图片到编辑器窗口、拖拽图片到编辑器窗口、截图复制到剪贴板再粘贴到编辑器窗口、复制外部文章中的图片到编辑器窗口。需要说明的是如果引用的外部图片增加了防盗链，用户在编辑器里面是无法上传的。

2.上传视频

用户选择本地视频文件上传到服务器供其他人浏览，在用户上传过程中可以设置视频的封面；如果是历史上传过的视频，平台能直接读取系统中的记录而不是重新上传以节省资源和提高用户体验。

用户上传视频后在前端播放视频这个环节也非常重要。根据场景分为微信、浏览器，APP；根据平台可以分为安卓、苹果、PC等。如何选择一款在各端体检都出色的播放器需要产品经理和开发人员一起协作。比如目前浏览器中视频倍速播放已经是一个标配，如果不支持就很影响用户体验。

3.公式

编辑器中输入公式一般是使用TeX公式语法插入字符，系统会自动生成对应的图片供用户使用。下文中提到的Markdown也支持TeX公式。

知乎

4.实时保存

自动保存是指编辑器每隔3-5s就自动保存一次，可以保存在用户本地，也可以保存服务端。

很多平台增加了历史版本功能，相当于给草稿箱设置了不同的版本，用户可以选择回滚到历史的任意版本。当然这个设计是比较消耗服务器资源的，所以产品经理要评估下是否有必要和保存的历史版本个数。

Mrdkdown编辑器

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown的理念是，能让文档更容易读、写和随意改。Markdown在中文输入场景下有一个比较明显的缺陷，那就是需要用户在中英文间进行切换，稍微有一点麻烦。

如果只是简单的整理内容，简单的几个标签就能满足需求。常用的标签包括标题、引用、无须列表、分割线。

Markdown使用两次回车键是换行，但部分平台通过特殊方式也实现了一个回车换行（比如作业部落），但一个回车和两个回车的换行间距是不一样的。

作业部落

注意事项

编辑器虽然是后台的功能，但对应的前端展示也非常重要。比如一行展示多少字，字体的默认颜色，这些都需要产品经理和UED团队一起定义好。

一个精心设计的编辑器能给用户带来愉快的用户体验。比如印象笔记中的超级笔记是用/唤起功能菜单，这个操作就很不友好。国外的区块笔记使用的是/，这个并不影响用户继续输入英文；而国内的用户如果要使用/就必须从中文切换到英文然后再切换回中文，相信是谁都不会喜欢。而蓝湖推出的超级文档在这个细节上就很贴心，支持英文的/也支持中文的、，可以看出设计人员肯定是下了功夫的。

蓝湖超级笔记

平台需要结合自己的业务特征选择合适的编辑器类型，同时考虑自研还是在开源的基础上修改。无论选择哪一种，都是为了给用户提供一个良好的创作工具。

在写作过程中，如果有意见或者想法，欢迎有兴趣的读者与我一起交流探索，共同进步。