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