有道云笔记跨平台富文本编辑器的技术演进

于 2020-05-28 17:10:12 发布
阅读量715 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wl5875/article/details/106409117
版权
本文详细介绍了有道云笔记富文本编辑器的跨平台架构设计，从一代到三代的技术迭代。文章讨论了如何在不同终端实现一致性编辑体验，包括基于contenteditable特性的编辑器的挑战与超越contenteditable的编辑器的设计思路，如数据层与视图层的分离，以及自实现的undo/redo、输入法对接等关键功能。此外，还探讨了编辑器的协同编辑实现和开源与自研的权衡。
摘要由CSDN通过智能技术生成

使用过有道云笔记的读者会发现，该 App 在 Windows、mac OS、桌面浏览器（WebKit 内核）、 iOS、Android 等终端提供了富文本编辑能力。在不同终端实现基本一致的编辑能力，这是如何做到的呢？

跨平台架构设计

这必须从有道云笔记富文本编辑器的基本架构说起。

图1 有道云笔记编辑器跨平台架构设计

图1 有道云笔记编辑器跨平台架构设计

有道云笔记编辑器使用了前端技术构建编辑器的核心，并运行在特定的宿主环境（Native App 提供的浏览器环境）中。在不同平台，浏览器环境不一样，以下是有不同平台中使用的浏览器环境。

表1 有道云笔记编辑器的宿主环境

表1 有道云笔记编辑器的宿主环境

在 Windows 平台的客户端中，使用了 CEF（Chromium Embedded Framework）提供浏览器环

了解本专栏 订阅专栏 解锁全文
直播大本营
关注
专栏目录
订阅专栏
博客
苏州电博会，友达携六大场域洞见未来
11-23 252
电子信息产业是苏州市支柱产业之一，也是苏州率先突破万亿级的产业。2021年，是“十四五”开局之年，也是苏州电博会成功举办的第20年，而友达光电也在苏州深耕了20年。薪火相惜，一起携手共创未来。与此同时，友达紧跟时代脉搏，积极响应苏州市政府“加快智能化改造和数字化转型”的号召、全力打响“苏州制造”品牌的关键举措，助力苏州传统产业转型升级、制造业高质量发展。【荣耀时刻，友达再获紫峰奖殊荣】电博会开幕式当天也是第三届江苏省紫峰奖颁奖仪式，省台办、工信厅、商务厅、苏州市相关领导均出席并颁奖。该奖项为表彰对江苏高
博客
画像在同城物流调度系统的实践
05-28 852
在同城物流的服务品类多样化、多角色参与场景下，能够做到精细化细分给角色贴“标签”，通过一系列算法和规则进行挖掘，得到的数据能够比较好的理解和运用，最终达到服务私人订制、完善产品平台、提升服务质量的关键支撑。引言随着互联网技术的蓬勃发展，“互联网+”影响着人们生活的方方面面，网购的繁荣和移动支付的持续多场景的渗透，O2O 的模式是众多互联网的必争之地，更有大量传统企业开启向互联网模式的变革进程。消费模式升级的促使人们把 O2O 逐步成为常态，而在领域做得细分最早的行业就是外卖场景的同城物流，如果移动互联网
博客
唯品会双11大促技术保障实践
05-28 518
每年双11是国内各大电商贴身肉搏，激烈交锋的时刻，同时也是把几十天的交易量浓缩到一天释放的日子。为了准备双11的大促，各家都会在营销、促销、技术保障、物流、售后、客服等各个环节付出相当大的努力。唯品会作为中国第三大电商公司，自然也会在这场盛宴中付出自己的努力，收获应有的成绩。夯实基础，梳理业务唯品会是一家专注于特卖闪购的电商公司。业务系统为了支撑特卖的场景，在架构上有一些鲜明的特点：购物车库存扣减，特卖专场作为营销和流量的入口，优惠活动设置在专场维度，营销触达的周期性峰值明显，自建物流系统支持分区售卖等
博客
不再谷满谷，坑满坑，看苏宁库存架构转变
05-28 544
2017双11大促刚刚过去，苏宁易购交易系统的请求量和订单量在双11当日呈现指数级的增长，更是实现了7秒最快破亿记录，苏宁易购交易系统在大促期间平稳运行，完美度过双11。作为苏宁易购交易系统负责人，我给大家介绍交易核心系统之一，库存系统的架构演进与实践，并介绍库存系统是如何筹备和应对双11的流量洪峰的。本文推荐架构师、技术经理、开发工程师、技术总监等群体阅读，希望能够让大家受益。库存业务介绍及面临的挑战库存系统定位及核心业务场景分析首先介绍一下库存系统的定位，它主要为企业级的经营性可用商品库存获取应用
博客
电商物流系统技术架构进化史
05-28 1151
1998年3月，中国第一笔互联网网上交易成功，标志着中国正式从电子数据交换时代步入互联网电子商务时代，从2003年开始进入迅速发展阶段，到今天，中国电子商务格局已经形成。笔者在传统企业应用和电商互联网公司摸爬滚打了15年，亲历过传统企业应用向互联网转型，以及电商物流系统的架构演进过程。本文是笔者根据多年经验整理的一个小结。电商物流系统主要包括仓储、预分拣、分拣、配送、干线运输、售后、客服等业务系统。电商物流系统的架构是随着技术的进步一步步进化过来的，最初也和传统企业应用一样，经历过 C/S 和 B/S 时
博客
百万用户分布式压测实践手记
05-28 520
微博产品后端服务团队在资源受限情况下基于 Tsung 提供了一套开箱即用的100万用户性能压测工具套件，推动两名能力和经验都欠缺的中初级工程师，不但顺利完成支持海量用户的在线聊天室项目任务，同时保证了该业务系统整体处理性能可控并按照预期方式向前推进。需求 & 背景前段时间我们为微博 App 增加一个视频直播聊天室功能，这是一个需要支持海量级手机终端用户一起参与、实时互动的强交互系统，建立在私有协议之上、有状态的长连接 TCP 应用。和其他项目一样，在立项之初，就已确定所构建系统至少能够承载100
博客
同程旅游缓存系统（凤凰）打造 Redis 时代的完美平台实践
05-28 538
缓存大家比较熟悉，在各种场景下也用得很多，在同程旅游也一样，缓存是一个无处不在的精灵，也是抗并发压力的核心系统之一。今天我们来讲一下同程旅游在缓存方面的经验。先来看一下我们的缓存走过了哪些历程。最早我们在应用中使用内存对象来存放变化比较小的数据，慢慢发现在应用本地的内存量不足以这样折腾，很是精贵，所以开始使用从 MemCache 来将缓存从应用中分离出来。之后缓存的场景变得更多了，MemCache 的一些不足之处开始显现，如支持的数据结构单一等。于是开始使用 Redis ，对于 Redis 的使用也从单机开
博客
微信数据强一致高可用分布式数据库PhxSQL设计与实现
05-28 430
本文详细描述了 PhxSQL 的设计与实现。从 MySQL 的容灾缺陷开始讲起，接着阐述实现高可用强一致的思路，然后具体分析每个实现环节要注意的要点和解决方案，最后展示了 PhxSQL 在容灾和性能上的成果。设计背景互联网应用中账号和金融类关键系统要求和强调强一致性及高可用性。当面临机器损坏、网络分区、主备手工或者自动切换时，传统的 MySQL 主备难以保证强一致性和高可用性。PhxSQL 将 MySQL 集群构建在一致性完善的 Paxos 协议基础上，保证了集群内 MySQL 机器之间数据的强一致性和
博客
万人协同规模下的代码管理架构演进
05-28 320
互联网研发，唯快不破。为了提升公司整体研发效率，百度引入了业界的优秀工程实践，设计开发了一整套研发工具链。主要包括项目管理平台、代码开发协作平台和持续交付平台，分别针对需求、开发和交付场景，提供工具、流程和数据支持，如图1所示。图1 百度研发工具链代码管理的目标场景就是开发场景，是研发活动的核心环节，承载着打通需求、交付上下游的作用。百度代码管理建设分别从文化传播、工程实践和产品建设三个方面入手推进公司代码管理水平的不断提升。为此，我们推出了代码管理建设的五级金字塔模型，如图2所示，分别代表了代码管
博客
京东分布式数据库系统演进之路
05-28 891
关于数据库的使用，在京东有几个趋势，早期主要用 SQL Server 及 Oracle 也有少量采用 MySQL，考虑到业务发展技术积累及使用成本等因素，很多业务都开始使用 MySQL，包括早期使用 SQL Server 及 Oracle 的很多核心业务也都渐渐开始迁移到 MySQL，单机 MySQL 往往无法支撑这类业务，需要考虑分布式解决方案，另外原本使用 MySQL 的业务随着数据量及访问量的增加也会遇到瓶颈，最终考虑采用分布式解决方案，整个京东随着业务发展采用数据库的趋势如图1所示。图1 业务
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值