kissy editor dev and design

1. Kissy editor 介绍
何一鸣（承玉@taobao）

2. About me
 2003 - 2010 Fudan CS
 2010.07 - F2E @ Taobao
 目前开发维护 kissy editor

3. 大纲
 1. 编辑器的分类
 2. 编辑器的实现
 3. KISSY Editor的设计
 4. 打包与部署
 5. 总结与前景展望

4. 1. 编辑器的分类

5. 1.1 所想即所得

6. 1.2 所见即所得

7. Web 可视化编辑器

8. 2. 编辑器的实现
 创建 iframe 元素，设置 body 属性
contenteditable为 true
 方法
◦ 调用 execCommand
◦ Range 自主实现
 实现注意

9. 2.1 调用 execCommand
 ie 4.0 引入
 bSuccess = object.execCommand(sCommand[,bUserInterface][,vValue])
◦ sCommand : 命令名
◦ bUserInterface : 用户界面提示
◦ vValue : 命令参数

10. execCommand 例子
 加粗当前选择文字
◦ document.execCommand("bold",null,false);
 添加链接
◦ 直接添加
 document.execCommand("createlink",
null,"http://www.g.cn");
◦ 弹窗提示用户输入
 document.execCommand("createlink",
true);

11. execCommand 问题
◦ 代码生成不一致
 行内格式化
 ie 会生成 font 标签
 <font color=“#ff0000”>x</font>
 safari 生成私有 class
 <span
class=“Apple-style-span”
style=“font-weight:bold;”>x</span>
◦ 能力不一致
 Createlink
 Firefox 不支持用户界面提示
 自己 window.prompt

12. execCommand 兼容性

13. execCommand

14. 2.2 Range 自主实现
 使用 range 实现 execCommand 对等
功能。
◦ Range api (w3c , ie)

15. W3c Range
 用来获取光标或选择区域信息
 W3c api
 Interface Range {
◦ Node startContainer
◦ Long startOffset
◦ Node endContainer
◦ Long endOffset
 }

16. IE Range
 ControlRange
◦ 选取整个元素 （div,img,object）
◦ Item (index) : 获取选中元素节点
 TextRange
◦ 获取选中的文本区域
◦ Text : 选中的文本串值
◦ parentElement() :
◦ compareEndPoints()
◦ moveToElementText()

17. Do not hurt web

18. 实现 execCommand
 Range + Dom2 + Dtd = execCommand

19. Dtd 的作用
 标签格式化系统需要考虑标签嵌套规则
 根据 dtd 以及格式标签进行 Range 的
拆分！

20. Dtd 例子
 加粗
◦ ^<p>line</p><p>line2</p>^
◦ 错误：
 <strong><p>line</p><p>line2</p>
</strong>
◦ 正确：
 <p><strong>line<strong></p>
<p><strong>line2</strong></p>

21. 2.3 常见问题
 换行代码生成差异
 ie 选择区域丢失问题
 Firefox 不可编辑问题
 光标定位问题…..

22. Enter 换行差异
◦ <h1>bla bla^</h1> 末尾换行
 ie
 <h1>bla bla</h1>
<p>|</p>
 Safari
 <h1>bla bla</h1>
<h1>|</h1>
 Firefox
 <h1>bla bla</h1>
|<br><br>

23. ie 选择区域丢失
 ie 编辑器内 iframe文档失去焦点后，
其选择区域/光标位置也随之丢失 。
 解决：
◦ 随时存储当前 range
◦ 即将获取焦点前（focusin）立即恢复
range

24. Firefox 不可编辑问题
 Firefox 编辑器内 iframe 移动后（最
大化），不可再编辑。
 解决：
◦ 重置 contenteditable 属性

25. 3. KISSY Editor 的设计
 3.1 功能简介与 demo 演示
 3.2 总体架构
 3.3 插件机制
 3.4 动态加载机制
 3.5 定制插件开发
 3.6 设计模式的应用

26. 3.1 功能介绍

27. 功能介绍

28. 3.2 总体架构
Custom
plugins
Core
plugins
Editor core
Kissy core

29. 架构介绍

30. 3.3 插件机制
 editor.addCommand(“image”,imageSupportObj);

31. 插件实现分离机制
 插件的功能定义在 KISSY.Editor
◦ 插件功能类：
 KISSY.Editor.ColorDef.prototype.do=function(){}
◦ UI插件类
 KISSY.Editor.Overlay=function(){
 }

32. 插件的实例应用
 插件最终要使用在实例上
◦ KISSY.Editor.use(“colordef”,function(){
 editor.addButton({
 click:function(){
 colorInstance.do();
 }
 });
◦ });
 实例的use即是应用插件的过程
◦ editor.use(“color”);

33. 3.4 动态加载机制
 1. 插件窗口按需动态加载
 2.配置插件间的依赖关系图插件按需动
态加载

34. 3.5 定制插件开发

35. 定制插件开发例子
 Sourcearea 与 bangpai-sourcearea
 调用execCommand
editor.execCommand(“modeChange”
,”source”);

36. 3.6 设计模式应用
 Do not repeat yourself !
 scalability

37. Template method
Flash
+gen()
+getUrl() : string
+getDemision() : object
music
+getUrl() : string
+getDemision() : object

38. Visitor / filter
HtmlParser
+parse(in html : string, in fragment : object)
Fragment
+onNode(in node : object)
+onElement(in el : object)
+onAttribute(in attr : object)

39. Observer-listener
 最常见
Editor -subject
-selectionChangeHanlders : object
+on(in selectionChangeHanlder : object)
1
+fire(in selectionChangeEvent : object)
* -observer
SelectionChangeHanlder
+onSelectionChange(in selectionChangeEvent : object)
Plugin
+onSelectionChange(in selectionChangeEvent : object)

40. Command
Editor
+addCommand(in cmd : string, in func : object)
+execCommand(in cmd : string)
 复杂的操作用命令封装
 editor.addCommand(“align”,alignCmdObj);
 editor.execCommand(“align”,”left”);

41. 4. 打包与部署
 4.1 源码概况
 4.2 使用工具
 4.3 最终部署

42. 4.1 源码概况
 结构

43. 4.2 使用工具
 Ant 粘合剂

44. 4.3 部署
 静态引入

45. 4.3 部署
 动态引入（combo加载）
◦ Kissy-seed.js
KISSY.use(“editor”,function(S) {
S.Editor(“#e”).use(“font,image,music”);
});
Cdn combo 两阶段
http://a.tbcdn.cn/??kissy-core.js,editor/editor-core.js
http://a.tbcdn.cn/??
editor/plugins/font/plugin.js,editor/plugins/image/plugin.js

46. 5.总结
 1. 再次回顾
 2. 与其他编辑器的比较
 3. 前景与展望

47. 回顾

48. 其他编辑器
 站在巨人肩上
◦ ckeditor , tinymce，google doc

49. 前景与展望
 1. 更少代码完成80%的功能
 2. 触摸事件支持，加强Mobile设备
 3. Html5 代码生成，使用 video ,
audio . 生成 header , nav , section ,
加强标签语义 .

50. 感谢
 Kissy editor 1.0 ：玉伯
 视觉： 书安倾情奉献
 产品经理：向秋
 测试：小菊，南玲，周坤，黛霁

51. 特别感谢

52. FAQ
 Email：yiminghe@gmail.com
 Blog: http://yiminghe.javaeye.com