Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kissy editor开发与设计

9,838 views

Published on

kissy editor dev and design

Published in: Technology
  • Be the first to comment

Kissy editor开发与设计

  1. 1. Kissy editor 介绍 何一鸣(承玉@taobao)
  2. 2. About me  2003 - 2010 Fudan CS  2010.07 - F2E @ Taobao  目前开发维护 kissy editor
  3. 3. 大纲  1. 编辑器的分类  2. 编辑器的实现  3. KISSY Editor的设计  4. 打包与部署  5. 总结与前景展望
  4. 4. 1. 编辑器的分类
  5. 5. 1.1 所想即所得
  6. 6. 1.2 所见即所得
  7. 7. Web 可视化编辑器
  8. 8. 2. 编辑器的实现  创建 iframe 元素,设置 body 属性 contenteditable为 true  方法 ◦ 调用 execCommand ◦ Range 自主实现  实现注意
  9. 9. 2.1 调用 execCommand  ie 4.0 引入  bSuccess = object.execCommand(sCommand[,bUserInterface][,vValue]) ◦ sCommand : 命令名 ◦ bUserInterface : 用户界面提示 ◦ vValue : 命令参数
  10. 10. execCommand 例子  加粗当前选择文字 ◦ document.execCommand("bold",null,false);  添加链接 ◦ 直接添加  document.execCommand("createlink", null,"http://www.g.cn"); ◦ 弹窗提示用户输入  document.execCommand("createlink", true);
  11. 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. 12. execCommand 兼容性
  13. 13. execCommand
  14. 14. 2.2 Range 自主实现  使用 range 实现 execCommand 对等 功能。 ◦ Range api (w3c , ie) ◦ 实现 execCommand 功能
  15. 15. W3c Range  用来获取光标或选择区域信息  W3c api  Interface Range { ◦ Node startContainer ◦ Long startOffset ◦ Node endContainer ◦ Long endOffset  }
  16. 16. IE Range  ControlRange ◦ 选取整个元素 (div,img,object) ◦ Item (index) : 获取选中元素节点  TextRange ◦ 获取选中的文本区域 ◦ Text : 选中的文本串值 ◦ parentElement() : ◦ compareEndPoints() ◦ moveToElementText()
  17. 17. 实现 execCommand  Range + Dom2 + Dtd = execCommand
  18. 18. Dtd 的作用  标签格式化系统需要考虑标签嵌套规则  根据 dtd 以及格式标签进行 Range 的 拆分!
  19. 19. 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>
  20. 20. 2.3 常见问题  换行代码生成差异  ie 选择区域丢失问题  Firefox 不可编辑问题  光标定位问题…..
  21. 21. 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>
  22. 22. ie 选择区域丢失  ie 编辑器内 iframe文档失去焦点后, 其选择区域/光标位置也随之丢失 。  解决: ◦ 随时存储当前 range ◦ 即将获取焦点前(focusin)立即恢复 range
  23. 23. Firefox 不可编辑问题  Firefox 编辑器内 iframe 移动后(最 大化),不可再编辑。  解决: ◦ 重置 contenteditable 属性
  24. 24. 3. KISSY Editor 的设计  3.1 功能简介与 demo 演示  3.2 总体架构  3.3 插件机制  3.4 动态加载机制  3.5 定制插件开发  3.6 设计模式的应用
  25. 25. 3.1 功能介绍
  26. 26. 功能介绍
  27. 27. 3.2 总体架构 Custom plugins Core plugins Editor core Kissy core
  28. 28. 架构介绍
  29. 29. 3.3 插件机制  editor.addCommand(“image”,imageSupportObj);
  30. 30. 3.4 动态加载机制  1. 插件窗口按需动态加载  2.配置插件间的依赖关系图插件按需动 态加载
  31. 31. 3.5 定制插件开发
  32. 32. 定制插件开发例子  Sourcearea 与 bangpai-sourcearea  调用execCommand editor.execCommand(“modeChange” ,”source”);
  33. 33. 3.6 设计模式应用  Do not repeat yourself !  scalability
  34. 34. Template method Flash +gen() +getUrl() : string +getDemision() : object music +getUrl() : string +getDemision() : object
  35. 35. Visitor / filter HtmlParser +parse(in html : string, in fragment : object) Fragment +onNode(in node : object) +onElement(in el : object) +onAttribute(in attr : object)
  36. 36. 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)
  37. 37. Command Editor +addCommand(in cmd : string, in func : object) +execCommand(in cmd : string)  复杂的操作用命令封装  editor.addCommand(“align”,alignCmdObj);  editor.execCommand(“align”,”left”);
  38. 38. 4. 打包与部署  4.1 源码概况  4.2 使用工具  4.3 最终部署
  39. 39. 4.1 源码概况  结构
  40. 40. 4.2 使用工具  Ant 粘合剂
  41. 41. 4.3 部署  静态引入
  42. 42. 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
  43. 43. 5.总结  1. 再次回顾  2. 与其他编辑器的比较  3. 前景与展望
  44. 44. 回顾
  45. 45. 其他编辑器  站在巨人肩上 ◦ ckeditor , tinymce,google doc
  46. 46. 前景与展望  1. 更少代码完成80%的功能  2. 触摸事件支持,加强Mobile设备  3. Html5 代码生成,使用 video , audio . 生成 header , nav , section , 加强标签语义 .
  47. 47. 感谢  Kissy editor 1.0 :玉伯  视觉: 书安倾情奉献  产品经理:向秋  测试:小菊,南玲,周坤,黛霁
  48. 48. FAQ  Email:yiminghe@gmail.com  Blog: http://yiminghe.javaeye.com

×