后台产品设计之编辑器

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

后台产品设计指南

编辑器类型

富文本编辑器

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

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

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

1.上传图片

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

2.上传视频

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

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

3.公式

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

知乎

4.实时保存

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

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

Mrdkdown编辑器

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

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

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

作业部落

注意事项

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

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

蓝湖超级笔记


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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,951评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,606评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,601评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,478评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,565评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,587评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,590评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,337评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,785评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,935评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,578评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2 352

推荐阅读更多精彩内容