在 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 期所有百度技术沙龙的演讲视频和资料等，感兴趣的读者可以直接浏览阅读。
注册/登录 InfoQ 发表评论