Kissy editor开发与设计
12 likes•2,244 views
本文档介绍了 kissy editor 的详细设计和实现，包括编辑器分类、功能、架构和插件机制等内容。重点描述了 editor 的 execcommand 方法及其实现的兼容性问题，同时探讨了插件的动态加载和定制开发。最后，文档总结了 kissy editor 的前景和与其他编辑器的比较。
![2.1 调用 execCommand
ie 4.0 引入
bSuccess = object.execCommand(sCommand[,bUserInterface][,vValue])
◦ sCommand : 命令名
◦ bUserInterface : 用户界面提示
◦ vValue : 命令参数](https://image.slidesharecdn.com/kissy-editor-101018210734-phpapp01/85/Kissy-editor-9-320.jpg)
Kissy editor开发与设计
- 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：[email protected] Blog: http://yiminghe.javaeye.com