百度技术沙龙第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期所有百度技术沙龙的演讲视频和资料等，感兴趣的读者可以直接浏览阅读。