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

《有道云笔记跨平台编辑器的演变》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、有道云笔记跨平台编辑器的演变有道云笔记编辑器网易有道高级技术经理李勤飞??编辑器介绍??编辑器技术架构??多平台的问题??一些思考??有道云笔记（//note.youdao4>>）是一款跨平台记录软件??PC??Android??iPhone/iPad??Mac??Web/Wap??对于有道云笔记来说，编辑器是核心体验，编辑器是否好用直接影响用户残留、NPS等核心指标，所以笔记组建了专门的编辑器团队。??演示编辑器基本功能??有道云笔记的编辑器要解决哪些问题：??基础的富文本编辑器功能：字体，字号，加粗，颜色，列表项等等??图片，表格??

2、附件（能在编辑器中双击打开并编辑保存）??格式刷，撤销/重做等高级功能??移动平台编辑器??手写/手写二次编辑??录音编辑器技术架构??编辑器通常有两种做法：??本地编辑器，自定义文档格式，用客户端代码解析和展示文本，典型的应用是Word。??基于浏览器或浏览器内核的文本编辑器，利用浏览器的编辑模式，产生的文档格式为html代码。CKEditor、TinyMCE等知名富文本编辑器都是基于这个原理。??有道云笔记的编辑器是介于这两种做法中间的混合式编辑器编辑器架构1，这个架构的重点是引入了命令系统中间层，用JS语言实现2，用户操作会被翻译成

3、命令（CMD），CMD首先会由中间层截获，中间层会根据CMD产生三种决定1）JS语言自己处理该命令2）把命令交给CEF处理3）把命令交给客户端本地C++代码处理??CEF（Chromium嵌入式框架）是一个开源项目，可使开发人员轻松地在其桌面应用程序中显示HTML内容。通过可用的API，可以精细地控制甚至可以扩展HTML视图。在底层，HTML呈现是通过Chromium浏览器项目完成的，该项目基于WebKit引擎（现为Blink）和V8JavaScript虚拟机。??CEF是有道云笔记编辑器至关重要的模块??1，所见即所得的编辑器效果，不必

4、自己编写绘制排版代码??2，绝大多数用户操作被直接交给CEF处理1）操作DOM，编辑HTML<div>abc</div>to<div><strong>abc</strong></div>2）execCommand函数document.execCommand(‘bold’)3）JS调用本地C++代码打开附件??CEF无法解决的问题：??1，一些操作交给CEF处理得不到产品需要的效果??1）复制/粘帖：粘帖网页/Word内容到编辑器，需要自己做一个过滤器??2）撤销/重做

5、：??2，一些高级操作CEF不具备??1）格式刷??2）表格??3，附件实时打开编辑??1）hackhtml格式的image标签??2）js/c++相互调用??image标签的重要作用??<imgsrc=;image-resourceId;path=;attachment-resourceId;title=;;alt=;;filename=;“>多平台产生的问题多平台产生哪些问题??浏览器内核不一致??不同平台对于同一个内容的表现方式不一致??手写：移动端可编辑器、PC端是一张图片??不同的平台需要约定格式的处理方式??版本更

6、新时间不统一??新功能在某个平台先上，其他平台不能出错自定义标签设计??越来越多的内容需要以Resource的形式存储于笔记中，例如手写笔记、TODO列表??原有的img标签仅通过src和path属性支持图片与附件??目标??保持对老客户端的兼容性，原有客户端应该仍然可以同步??方便各个端或者某些端添加新的Resource类型以及Resource的关联??当某个端所添加的Resource无法被其他端所处理的情况下，其他端也能够保持正常的同步以及正常的显示，防止出现某个类型的Media被部分修改或者删除的情况??<imgdata-me

7、dia-type=;xxxx;src=;image-resourceId;path=;attachment-resourceId;title=;;alt=;;filename=;;data-res-aaa=;resourceId1;data-res-bbb=;resourceId2;data-attr-ccc=;inline-attribute;/>??data-media-type（所有media必须）:表示该media的类型，客户端根据这个字段来判断是否能够处理这个media。无法处理能显示默认图片。??src（所有media必

8、须）：表示该media在默认情况下展示给用户的图片，例如对于图片来说就是图片本身的ResourceId，而对于附件来说则是图标的ResourceId。??path（仅附件）：为了向前兼容，附件