有道云笔记跨平台编辑器的演变.pdf

有道云笔记编辑器 网易有道高级技术经理 李勤飞 • 编辑器介绍 • 编辑器技术架构 • 多平台的问题 • 一些思考 • 有道云笔记（ ）是一款跨平台记录软件 • PC • Android • iPhone/iPad • Mac • Web/Wap • 对于有道云笔记来说，编辑器是核心体验，编辑器是否好用直接 影响用户残留、NPS等核心指标，所以笔记组建了专门的编辑器 团队。 • 演示编辑器基本功能 • 有道云笔记的编辑器要解决哪些问题： • 基础的富文本编辑器功能：字体，字号，加粗，颜色，列表项等等 • 图片，表格 • 附件（能在编辑器中双击打开并编辑保存） • 格式刷，撤销/重做等高级功能 • 移动平台编辑器 • 手写/手写二次编辑 • 录音 编辑器技术架构 • 编辑器通常有两种做法： • 本地编辑器，自定义文档格式，用客户端代码解析和展示文本，典型的 应用是Word 。 • 基于浏览器或浏览器内核的文本编辑器，利用浏览器的编辑模式，产生 的文档格式为html代码。CKEditor 、TinyMCE等知名富文本编辑器都是基 于这个原理。 • 有道云笔记的编辑器是介于这两种做法中间的混合式编辑器 编辑器架构 1，这个架构的重点是引入了命令系统中间层，用JS语言实现 2，用户操作会被翻译成命令（CMD ），CMD首先会由中间层截获，中间层会 根据CMD产生三种决定 1）JS语言自己处理该命令 2 ）把命令交给CEF处理 3 ）把命令交给客户端本地C++代码处理 •CEF （Chromium 嵌入式框架）是一个开源项目，可使开 发人员轻松地在其桌面应用程序中显示HTML 内容。通 过可用的API ，可以精细地控制甚至可以扩展HTML 视 图。在底层，HTML 呈现是通过Chromium 浏览器项目完 成的，该项目基于WebKit 引擎（现为Blink）和V8 JavaScript 虚拟机。 •CEF是有道云笔记编辑器至关重要的模块 • 1，所见即所得的编辑器效果，不必自己编写绘制排版代码 • 2，绝大多数用户操作被直接交给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 /c++相互调用 • image标签的重要作用 • img src=image-resourceId path=attachment-resourceId title= alt= filename=“ 多平台产生的问题 多平台产生哪些问题 • 浏览器内核不一致 • 不同平台对于同一个内容的表现方式不一致 • 手写：移动端可编辑器、PC端是一张图片 • 不同的平台需要约定格式的处理方式 • 版本更新时间不统一 • 新功能在某个平台先上，其他平台不能出错 自定义标签设计 • 越来越多的内容需要以Resource的形式存储于笔记中，例如手写 笔记、TODO列表 • 原有的img标签仅通过src和path属性支持图片与附件 • 目标 • 保持对老客户端的兼容性，原有客户端应该仍然可以同步 • 方便各个端或者某些端添加新的Resource类型以及Resource的关联 • 当某个端所添加的Resource无法被其他端所处理的