百度技术沙龙第 26 期回顾：前端组件原理及开发实践（含资料下载）

在 5 月 7 日由 @百度 主办、 @InfoQ 负责策划组织和实施的第26 期百度技术沙龙活动上，来自百度资深工程师，UEditor 富文本编辑器创始人和技术负责人战毅，多说网、图虫网创始人沈振宇（ @沈振宇）分别分享了各自在前端组件开发上取得的成果及经验，话题涉及“开源编辑器实现之 UEditor 分享”，以及“插件思想及多说的开发实践”等。本文将对他们各自的分享做下简单的回顾，同时提供相关资料的下载。

主题一：开源编辑器实现之 UEditor 分享（微盘下载讲稿）

来自百度 UEditor 富文本编辑器的创始人和技术负责人战毅第一个为大家分享，本次演讲的主要内容包括：编辑器的组成和实现、UEditor 整体介绍以及 UEditor 核心功能点实现细节，其中重点分享了编辑器的组成和实现原理。编辑器自然离不开编辑命令，而常用的编辑命令主要分为原生命令、使用原生选取重写原生命令和使用模拟选区重写原生命令三种，各自的优缺点如下：

• 使用原生命令（document.execCommand）
  • 优点：性能好，代码量少
  • 缺点：功能受限，bug 不可控，浏览器兼容性差
  • 项目：kindeditor，xheditor
• 使用原生选区，重写原生命令（Range）
  • 优点：功能丰富，bug 可控，浏览器兼容性好
  • 缺点：性能中等，代码量较大
  • 项目：ueditor，ckeditor，tinymce
• 使用模拟选取，重写原生命令
  • 优点：避免了所有原生选区的不足
  • 缺点：性能较差，IE 系列浏览器基本放弃，代码量大
  • 项目：google docs，webOffice

战毅还详细讲解了状态反射机制和过滤机制，状态反射机制是指用户的每次操作都会有编辑器界面状态的改变，可以为用户提供直观的编辑反馈，这需要通过注册一系列原生事件组合成 selectionchange 事件来触发；过滤机制则主要应用在“进入编辑器”和“离开编辑器”两个场景，主要是通过字符串过滤和转换过滤来实现。此外，编辑器的组成还包括键盘监听和界面，键盘监听主要监听文字的输入和功能键的输入。

最后，战毅对 UEditor 的整体结构进行了讲解，包括核心、功能、界面 UI、定制下载以及事件机制。还通过编辑操作的实现、Undo/Redo 的实现、粘贴的实现、过滤转换、状态反射和键盘操作等角度对 UEditor 的核心技术实现进行了讲解。

主题二：插件思想及多说的开发实践（微盘下载讲稿）

多说网、图虫网创始人沈振宇第二个为大家分享，重点介绍了插件开发思想、常见问题的解决方法以及多说在 Worldpress 插件开发中的经验，沈振宇提到 Web 插件开发中面临的主要问题有：

• 如何有效地利用建站程序提供的接口和钩子
• 建站程序本身的版本兼容问题
• 部署环境的不同所引发的自适应问题
• 部署环境的文件和数据权限
• 多语言的问题
• 和原有建站程序的前端代码协同工作的问题

接下来，沈振宇分别从 PHP 环境差异导致的问题、Web Server 的差异可能导致的问题、没有 cURL 的问题、多语言的问题、与原有 js 代码和 CSS 代码协同工作的问题等几方面进行了讲解，并给出了具体的解决方法。

Open Space（开放式讨论环节）

和以往的环节一样，​为了让参会者能够有更多的时间进行相互的交流，本次活动依然设置了 Open ​Space（开放式讨论）环节。除了讲师战毅、沈振宇外，参会者张成也参与了小组讨论。在 Open Space 的总结环节，几位话题小组长​分别对讨论的内容进行了总结。

战毅：主要分享了“UEditor 深入讨论”的话题，针对 UEditor 的具体实现以及使用上的问题进行了深入讨论，后续文档方面会进一步完善。

沈振宇：主要分享了“插件化开发思想”的话题，主要讨论了前端脚本加载方式，并详细讲解了如何通过 require 函数实现 JavaScript 的分布式加载的方法。

张成：主要分享了“CoffeeScript vs JavaScript”的话题，主要讨论了实时交互的 Web 实现。

会后，一些参会者也通过新浪微博分享了他们的参会感受：​​

@Quentin-Wang ：开放的会联网，是想国际的，产品要支持对语言，但是一开始可以针对一种语言，可能会做的更好。

@21 克木子：多看看别人的代码，多学习成功的作品，你能做的更好。

@热血 - 大飞：通过沙龙，熟悉了 fck，技术串起来了。

@有假熊出没：貌似插件的话题并不好说清楚呢～主系统的灵活性对插件影响很大～wp 这方面做得很好很强大哈。

@小蘑菇 1111 ：战毅大哥的技术演讲很精彩，讲得通熟易懂，很仔细，时间不够，还没讲完，期待继续。

有关百度技术沙龙的更多信息，可以通过新浪微博关注 ** @百度技术沙龙，或者加入百度技术沙龙微群 **，InfoQ 上也总结了过往 26 期所有百度技术沙龙的演讲视频和资料等，感兴趣的读者可以直接浏览阅读。