1、有道云笔记跨平台编辑器的演变有道云笔记编辑器 网易有道高级技术经理 李勤飞 ?编辑器介绍 ?编辑器技术架构 ?多平台的问题 ?一些思考 ?有道云笔记（/note.youdao4 ）是一款跨平台记录软件 ? PC ? Android ? iPhone/iPad ? Mac ? Web/Wap ?对于有道云笔记来说，编辑器是核心体验，编辑器是否好用直接影响用户残留、NPS 等核心指标，所以笔记组建了专门的编辑器团队。 ?演示编辑器基本功能 ?有道云笔记的编辑器要解决哪些问题： ? 基础的富文本编辑器功能：字体，字号，加粗，颜色，列表项等等 ? 图片，表格 ? 附件（能在编辑器中双击打开并编辑保存）
2、 ? 格式刷，撤销/重做等高级功能 ?移动平台编辑器 ? 手写/手写二次编辑 ? 录音 编辑器技术架构 ?编辑器通常有两种做法： ? 本地编辑器，自定义文档格式，用客户端代码解析和展示文本，典型的应用是 Word。 ? 基于浏览器或浏览器内核的文本编辑器，利用浏览器的编辑模式，产生的文档格式为 html 代码。CKEditor 、TinyMCE 等知名富文本编辑器都是基于这个原理。 ?有道云笔记的编辑器是介于这两种做法中间的混合式编辑器 编辑器架构 1，这个架构的重点是引入了命令系统中间层，用 JS 语言实现 2，用户操作会被翻译成命令（CMD） ，CMD 首先会由中间层截获，中间层会根据 C
3、MD 产生三种决定 1）JS 语言自己处理该命令 2）把命令交给 CEF 处理 3）把命令交给客户端本地 C+代码处理 ? CEF（ Chromium 嵌入式框架 ） 是一个开源项目，可使开发人员轻松地在其桌面应用程序中显示 HTML 内容。通过可用的 API，可以精细地控制甚至可以扩展 HTML 视图。在底层，HTML 呈现是通过 Chromium 浏览器项目完成的，该项目基于 WebKit 引擎（现为 Blink）和 V8 JavaScript 虚拟机。 ? CEF 是有道云笔记编辑器至关重要的模块 ? 1，所见即所得的编辑器效果，不必自己编写绘制排版代码 ? 2，绝大多数用户操作被直接交
4、给 CEF 处理 1）操作 DOM，编辑 HTML divabc/div to divstrongabc/strong/div 2）execCommand 函数 document.execCommand(bold) 3）JS 调用本地 C+代码 打开附件 ? CEF 无法解决的问题： ? 1，一些操作交给 CEF 处理得不到产品需要的效果 ? 1）复制/粘帖：粘帖网页/Word 内容到编辑器，需要自己做一个过滤器 ? 2）撤销/重做： ? 2，一些高级操作 CEF 不具备 ? 1）格式刷 ? 2）表格 ? 3，附件实时打开编辑 ? 1）hack html 格式的 image 标签 ? 2）js
5、 /c+相互调用 ? image 标签的重要作用 ? img src=;image-resourceId; path=;attachment-resourceId; title=; alt=; filename=;“ 多平台产生的问题 多平台产生哪些问题 ?浏览器内核不一致 ?不同平台对于同一个内容的表现方式不一致 ? 手写：移动端可编辑器、PC 端是一张图片 ? 不同的平台需要约定格式的处理方式 ?版本更新时间不统一 ? 新功能在某个平台先上，其他平台不能出错 自定义标签设计 ?越来越多的内容需要以 Resource 的形式存储于笔记中，例如手写笔记、TODO 列表 ?原有的 img 标签仅
6、通过 src 和 path 属性支持图片与附件 ?目标 ? 保持对老客户端的兼容性，原有客户端应该仍然可以同步 ? 方便各个端或者某些端添加新的 Resource 类型以及 Resource 的关联 ? 当某个端所添加的 Resource 无法被其他端所处理的情况下，其他端也能够保持正常的同步以及正常的显示，防止出现某个类型的 Media 被部分修改或者删除的情况 ? img data-media-type=;xxxx; src=;image-resourceId; path=;attachment-resourceId; title=; alt=; filename=; data-res-a
7、aa=;resourceId1; data-res-bbb=;resourceId2; data-attr-ccc=;inline-attribute; / ? data-media-type（所有 media 必须）: 表示该 media 的类型，客户端根据这个字段来判断是否能够处理这个 media。无法处理能显示默认图片。 ? src（所有 media 必须）：表示该 media 在默认情况下展示给用户的图片，例如对于图片来说就是图片本身的 ResourceId，而对于附件来说则是图标的 ResourceId。 ? path（仅附件）：为了向前兼容，附件本身的 ResourceId 仍然存
8、在 path 属性中，各个端也采用与之前相同的处理方法。 ? title，alt（仅 web 端）：这两个属性仅在 web 端会添加和使用，为了向前兼容仍然保留 ? filename（仅附件）：表示附件的文件名，在 mobile 端需要在附件下载前展示给用户 ? filelength（仅附件）：表示附件的文件大小，在 mobile 端需要在附件下载前展示给用户 ? data-res-xxx：该属性用于对自定义数据的扩展，以 data-res 为前缀表示该属性数据量较大，以笔记 Resource 的形式存储，如果一个终端可以处理该 Media，则可以下载相应的 Resource，如果无法处理，也
9、应该能够保证该 Resource（包括在笔记 Meta 和正文的标签中）在同步时不会丢失。 ? data-attr-xxx：该属性用于对自定义数据的扩展，以 data-attr 为前缀表示该属性数据量较小，已经内嵌在属性值中，因此可以直接读取，同上，如果一个终端无法处理该种类型的 Media，也应该保证该属性值不会在同步时丢失。 手写的处理 ? img data-media-type=“hw; src=;image-resourceId; path=; title=; alt=; filename=; data-res-aaa=;resourceId1; data-res-bbb=; data-attr-ccc=; / 一些思考 技术架构是一个演变过程 ?有道云笔记编辑器的演变断断续续经过了 4 年 ?技术架构是产品需求和技术可持续发展的妥协 ? 有道云笔记第一版的开发时间是 6 个月 ? PC 版达到现在的技术架构时间是 3 年 ? 移动版需要更长的时间 ?发展过程 ? IE - CEF ? PC-全平台 ?开源/技术购买与自主研发 ? 产品之初尽量小步快跑，不要试图开发太多东西 ? 产品成熟期，对于关键技术要死磕，建立技术壁垒 ?基础体验和产品创新 ? 明确基础体验的重要性 ? 产品需要方向性的创新
