案例剖析|编辑器,还真不是这么简单!

358 阅读4分钟


原创: Kevin改变世界的点滴 Kevin改变世界的点滴
今天

大家好,我是 Kevin。这是我2019第36篇原创




编辑器模块是涉及到UGC与内容管理的必备模块。在这样一个非常常见的组件,很多产品新人一看就是:无非是满足输入功能即可。


但仔细挖掘编辑器的背后你会发现涉及到有交互问题、编辑器扩展功能问题、编辑器与业务关联,3个问题。


交互问题




编辑器是用户鼠标、键盘落地的模块,要考虑鼠标有的状态:点击、滑动、悬浮;键盘的状态:快捷键、苹果键盘、win的键盘。


编辑器扩展问题



编辑器到底是文本编辑器、还是富文本编辑器,这是2个不同的产品。


文本编辑器则是对文本的格式、排版进行处理。所以你可以看到加粗、协体、左中右居中即可




富文本编辑器则增加了字体的大小、图片、视频、超链接等。


编辑器与业务关联




在编辑器中我们要产生内容,对于客服人员来说内容是客服回答话术、对于销售人员来说内容是产品介绍与销售话术。



针对编辑器,本质上选择产品的使用场景。若在文本消息的通知公告编辑器上,文本消息就足够。但对于文章、回答等场景,富文本则是刚需,尽可能的满足用户内容产生的方便


4个编辑器案例


知乎为例的编辑器



知乎的编辑器也更新了大概几个版次,从基础的输入内容体验到业务内容。比如支持函数、公式,另外编辑器可支持拖拽图片至任意位置上传;增加上传的占位和状态提示,帮助知友们更明晰地了解上传位置和进度;也可以选中图片进行调整尺寸大小,或用「图片注释」功能优雅地解释图片的背后故事。





简书编辑器




相比知乎,简书以给予作者提供专栏的方向,在编辑器的设计上就增加了专栏关联。每一篇文章都可以插入到对应专栏中。其次发布文章会要求上传相册、广告过滤后才可发布。这一举措降低了内容缺失导致内容质量下降问题,但却有时候增加了上传的门槛。




掘金的编辑器



掘金作为前端社区的黑马。在编辑器上支持markdown,同样给予沉浸式的编辑体验。用户编辑好内容后必须填写标签才可发布。


编辑器会跟随内容的增加,进行下层交互,保证作者可以随时调整格式与排版。




头条编辑器



头条编辑器提供的同样是富文本,但给出了汉子的限制。显然编辑器产生的内容覆盖了各类用户群体,系统中的筛选与过滤机制是以上几个编辑器最多的。


类似增加发文规范、系统自动去超链、二维码检测。



第三方插件


目前上面几个社区编辑器中,除了简书、掘金没有得到第三方插件支持。主流内容平台已经得到新媒体管家、壹伴的兼容支持,可以帮助作者提供更多文章格式、动态效果与自动化排版等。


编辑器5个难点



编辑器的测试首先是一个难点,针对编辑器涵盖若干个小功能点。每个功能点的边界测试、以及新功能上线后都需要回归测试所需耗费的时间较长的。



第二个难点是就各类内容进行测试,比如视频类、音频、图文类不同格式的内容进行上传测试,通过上传不同边界值尺寸的内容测试编辑器的稳定性


第三个编辑器1.0可以不用考虑草稿箱。在1.0的重点是冷启动社区,内容还是大部分在外部或转载,所以原创作者的需求相对较少。


第四个难点,编辑器在web中的交互、浏览器兼容问题。编辑器因为与系统的关联性有大原因,所以针对苹果、win的系统要做不同的兼容处理。


尤其在微信浏览器中、苹果浏览器、谷歌浏览器中是否有编辑器功能失效等,都需要验证测试。



第五个提供业务内容分发,这一点最难的是因为很多编辑器都停留在上面。当内容有特定的业务内容比如知乎的live、掘金的开源代码,编辑器如何高效的产品业务内容并帮助分发是产品经理需要考虑的。


好啦,今天的原创就在这里。我会每周更新2篇case


推荐阅读