Kissy editor开发与设计

9,759 views

Published on

kissy editor dev and design

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,759
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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

×