网站内容编辑器(关于编辑器的产品设计指南，你都知道吗？（上）)

　　网站内容编辑器(关于编辑器的产品设计指南，你都知道吗？（上）)

　　编辑指南：每个内容网站或社区产品都有一个编辑器，有的自己开发，有的基于开源编辑器开发；编辑器的难度和一些细节设计是很重要的一点，因为对于用户来说，一个好用的编辑器尤为重要；这篇文章的作者分享了一个关于编辑器的产品设计指南，一起来看看吧。

　　一、编器科普1.PC编辑器和移动端编辑器

　　社区产品具有自主开发的编辑器或基于开源编辑器的深度定制开发。绝对是社区的核心技术之一。国内几大社区都有自己的核心编辑器，如知乎、B站、虎扑、豆瓣、简书、CSDN等；还有很多以编辑为核心的产品，比如印象笔记、有道云笔记、Graphite Document、Word、WPS等。

　　互联网世界中的每个编辑器都是不同的。都是根据自己的业务定制的设计。

　　Word和WPS可以说是桌面客户端中总统级别的富文本编辑器，功能强大到其他编辑器都需要支持Word导入。

　　但在 Web 端，用户不需要像 Word 编辑器那样强大。简单的页面、便捷的交互、轻量级的融合了业务功能的富文本编辑器是更受欢迎的选择；这里的代表产品是 Google Docs。移动端编辑需要更加简洁，默认模板基本统一，更多自定义属性不会打开。

　　内容发布商在移动端和网络上的创意场景不同。手机上发布的大部分内容都是简短的、带有文字或视频的简单图片；虽然PC有更好的创作环境，但大部分比较深长的内容还是选择网页编辑器，所以本文主要关注更有价值的网页编辑器。

　　无论是PC还是手机编辑器，基本上都比Word简单很多。保留常用的富文本编辑功能，支持图片、视频等多媒体资源，可定时保存或多人编辑。

　　一般字体、字号、颜色、行距、下划线等功能编辑器基本相同，没有太大区别。这些作者称它们为“基本功能”；而自定义功能（不是每个编辑器，比如投票、定时保存、定时发布、视频剪辑、所见即所得等，我称之为“业务功能”。用户经常抱怨的编辑器不好用，大部分都是抱怨.“业务功能”。

　　2. 富文本编辑器和 Markdown 编辑器

　　富文本编辑器和Markdown编辑器必须社区产品经理懂，涉及编辑器选择、支持策略甚至运营策略。

　　互联网世界最早出现的是文本编辑器，只能支持纯文本的复制粘贴功能；随着技术的发展，需要将图片、视频等资源整合到编辑器中，加上各种格式和布局，于是就有了富文本编辑器，而我们接触到的编辑器大多是富文本编辑器。

　　Markdown 编辑器和富文本编辑器在功能上是一样的，但是 Markdown 编辑器使用了一套标记语言进行排版，而且很多都是在一些偏向技术分析的社区论坛中使用的；比如CSDN编辑器就是典型的Markdown编辑器，简书之前也用过Markdown，但后来转向了以富文本编辑器为主体，内容上也可能有一定的变化。

　　CSDN 的 Markdown 编辑器

　　知乎 的富文本编辑器

　　Markdown 编辑器具有标准的标记语言，这使得编辑器之间的交流非常方便，也有利于推广。

　　Markdown 编辑器的内容粘贴到任何支持 Markdown 的编辑器中不会出现格式混乱，而富文本编辑器之间的通信往往会导致格式混乱；比如编辑经常遇到的粘贴 Word内容在某个编辑器里，各种格式丢失，排版乱，完全不像Word里的排版风格；这是因为富文本编辑器没有统一的格式标准，基本都是定制化开发，粘贴的内容都是写出来的。进入数据库时​​，会按照自己的规则进行，会造成排版混乱。

　　虽然Markdown目前有些流行，但仍是小众编辑器，还有很长的路要走；这两种编辑器各有优缺点和应用场景。如果是技术社区的产品，编辑器必须支持Markdown。

　　经过上面的解读，我们基本可以知道，编辑器不仅仅是在网上找一个开源的改，支持word复制粘贴到编辑器也没有那么简单。它只能通过定制开发获得。能力。

　　二、Editor 四类核心功能产品设计

　　根据不同的业务场景，编辑器需要具备不同的功能。产品经理需要在梳理业务的过程中，有针对性地设计产品功能，以适应业务的发展。

　　1.上传图片/视频

　　上传图片和视频看似每个编辑器都有，但实际上是定制的业务功能；首先看业务的发展是否需要视频内容的独立运营，导致图文混杂，视频混编和视频独立发布三种场景。

　　对于虎扑、国球地等典型的文本型社区产品，大多数编辑器支持图文混合（其实底层的帖子类型是否支持视频展示），对于视频来说，大部分内容遵循独立的视频发布逻辑，只有视频内容、视频标题和介绍。

　　微信公众号、知乎等大部分平台都支持图片、文字、视频混合，丰富其内容呈现形式；而B站、西瓜等视频平台则在独立的视频发布逻辑之外。此外，视频功能也进行了深度定制和优化。

　　图片上传功能的主要关注点是对图片上传场景的支持。一般流程是点击编辑器图片上传按钮，选择本地图片，然后进行上传流程。云压缩后，下载库，获取业务域名。图片。

　　进入上传流程后，还是一样。一个有用的编辑器会在上传之前扩展场景，例如：

　　有更多关于视频上传的知识。这些B站上传的视频，知乎，抖音都是行业的佼佼者。视频上传最基本的过程是视频切片，分片上传到云端，然后转码。图书馆;一般转码后会转为播放器支持的视频流格式，方便视频统一维护。

　　在视频上传方面，产品有很多细节值得学习：

　　知乎的视频片段上传

　　图片/视频上传的所有功能都不是必须的。根据自己的业务场景，最大化提升图片/视频上传体验，这是产品经理必备的能力。

　　2.分析外部链接/插入超链接

　　除了本地上传视频，还有一个场景经常出现。运营希望支持外链直接插入视频；例如，运营在微博上发布视频，希望直接在编辑器中插入微博视频的链接即可播放；这样的需求本身就是合理的，可以大大提高操作效率，也可以给普通用户更多的视频上传选择。

　　这样的需求一般需要爬虫在解析插入的外链后对源视频进行爬取，然后再经过上面提到的视频上传转码过程，以保证视频是支持的视频流自己的播放器，不然经常会出现插入的外链视频但是播放器不能播放。

　　插入超链接的功能很简单，但是作者踩了很多坑，值得单独提取和解读；超链接的基本原理是一个简单的a标签，但它往往会成为重灾区：

　　首先，插入的超链接协议肯定不止https和http。 App端打开的页面往往是schema的形式，有自己的协议头。因此，需要梳理产品设计中对超链接协议的支持。 , 最好把协议头用尽。

　　其次，图片、*敏*感*词*、视频不允许插入超链接。不能在img标签和video标签外面再放一层tag，否则会出现攻击现象——用户看到一个logo的gif*敏*感*词*不动，下意识的点击一次，让*敏*感*词*动起来。这时候其实是先触发了外层的a标签，会跳转到超链接地址，不受平台控制。

　　最后，还有无数的文本链攻击。一般建立黑名单制度，对黑名单中的域名服务器进行过滤。

　　3. Word 文档导入

　　Word 导入功能是每个操作都希望拥有的编辑器功能之一，尤其是在没有草稿箱功能的情况下，Word 导入允许操作或用户直接将本地文档内容复制到编辑器中，如果格式和布局保持不变，只需点击发布即可结束。

　　然而，Word 文档的导入很少是完美的。原因是Word也分为03、07、13、16等版本。格式也分为doc和docx，再加上有一套完整的WPS系统，要达到完美的支持成本非常高。

　　word导入其实分为两种场景：

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

　　这四个功能都与最终发布有关。前三个是非必要的功能，产品经理会根据业务需求决定是否添加以增加体验。

　　1） 一般编辑会添加定时保存，防止用户遇到突发断电、网络故障等意外情况。可以在 3-5 秒内触发一次常规保存。此保存可以存储在本地或服务器上。

　　如果同时有草稿箱功能，一般会选择定期保存到服务器，而不是保存在本地；有手动保存入口，手动触发保存草稿操作。

　　2）拉笔箱其实就是你经常采集的地方。为了区分多个定期保存的内容，会设置草稿ID；例如，当用户离开编辑器并返回时，B站会提示用户。是否继续编辑，如果继续编辑，取定期保存的最后一个草稿。否则会新建一个草稿ID，原来保存的内容进入草稿箱。

　　3）预览功能很常见。产品经理为了在PC端和手机端看到布局的实际效果，往往会设计预览功能；需要注意的只有一点，在显示实际内容时需要根据渲染逻辑进行预览。而不是在编辑器中继续按逻辑设置一层“手机壳”UI。

　　4）发布功能是各个平台自身深度定制的功能，发布前定期校验，发布时服务器上各种限制逻辑校验；通常会检查发布者的身份和发布内容的部分。 、发布者权限的验证等，以及发布后对接的审核，这些都是商家设定的发布门槛。

　　对于社区产品，合理设置发布门槛有利于社区氛围的营造。

　　三、Summary

　　一个好的编辑器绝对是内容创作和消费导向平台的必备工具。只有适合内容创作者的舒适编辑器才能更好地输出内容。