编辑器设计2

1,144 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,144
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

编辑器设计2

  1. 1. KISSY Editor 设计(2) yiminghe@gmail.com kissyteam@weibo,twitter yiminghe@twitter
  2. 2. 大纲• KISSY Editor – 简介 – 实践• 开发难点
  3. 3. KISSY Editor ?
  4. 4. http://docs.kissyui.com/docs/html /api/component/editor/
  5. 5. KISSY Editor又一个开源的可视化编辑器底层以及 UI 基于 KISSY 框架编辑核心算法借鉴 CKEditor应用于淘宝商品发布/庖铺装修/论坛/….
  6. 6. KISSY Editor
  7. 7. Editor & pluginsbutton select menu overlay Edit API Html Parser component range selection & xhtml dtd dom event node ua base KISSY Loader
  8. 8. • 实践
  9. 9. • 基于 KISSY – 模块化机制 • KISSY.add 添加模块 • KISSY.use 使用模块
  10. 10. 代码都是模块KISSY.add("editor/range",function(S,DOM){ function Range(){} // todo return Range;},{ requires:[dom]});
  11. 11. 按需加载• 按需加载 + 自动 combo – 最优的链接数与加载代码大小
  12. 12. 按需加载KISSY.use("editor",function(){ KISSY.use("editor/plugin/fontSize/, editor/plugin/fontFamily/", function(){ // use plugins } );});
  13. 13. 懒加载• 懒加载非初始模块 button.on("click",function(){ S.use("editor/plugin/image/dialog"); });
  14. 14. 懒加载
  15. 15. • 基于 KISSY – 模块化机制 KISSY Component – 组件基础设施 • 属性 KISSY Editor
  16. 16. 属性• 外观 – width/height• 事件 – listeners• 创建 – srcNode – render
  17. 17. 编辑器属性• customStyle – 作用于编辑区域的特有样式• customLink – 作用于编辑区域的特有样式链接• data – 编辑器内容
  18. 18. • 基于 KISSY – 模块化机制 KISSY Component – 组件基础设施 • 属性 – 插件 KISSY Editor
  19. 19. 属性 - 插件• 具备介入组件生命周期能力的普通模块 createDOM renderUI bindUI syncUI
  20. 20. 编写插件KISSY.add("editor/plugin/bold/index",function(){ function FontSize(cfg){this.cfg=cfg;} FontSize.prototype={ renderUI: function(editor){ editor.addButton(...); } }; return FontSize;});
  21. 21. 使用插件new Editor({ width:500px; plugins:[{ SourceArea new FontSize({ ... }), new Image({ ... }), }]});
  22. 22. • 基于 KISSY – 模块化机制 KISSY Component – 组件基础设施 • 属性 • 事件 KISSY Editor
  23. 23. 事件• 核心  插件• 插件  插件 plugin2 editor plugin3 Plugin1
  24. 24. • 基于 KISSY – 模块化机制 – 组件基础设施 KISSY Component • 属性 • 事件 – 使用 KISSY UI KISSY Editor
  25. 25. 使用 KISSY UI
  26. 26. 命令系统• document.execCommand• editor.execCommand fontFamily fontSize bold editor
  27. 27. 无障碍• Aria in KISSY – Tab 支持 – 核心功能键盘可访问 – Aria 属性• 编辑器区域快捷键
  28. 28. 单元测试• 部分核心 jasmine
  29. 29. • 开发难点
  30. 30. • document.execComand – 加粗, 颜色 ……
  31. 31. • range/selection IE • Control range • Text range W3C • Range
  32. 32. • paste <font face="宋体"></font> <p style="margin: 0cm 0cm 0pt;" – 过滤 class="MsoNormal"> <span lang="EN-US"> <font face="Calibri"> 123 <b style="mso-bidi-font-weight: normal;"> 456 </b> 789 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p> </font> </span> </p> <font face="宋体"></font>
  33. 33. <p>123<b>456</b>789</p>
  34. 34. Html parse <P> style=‘margin:0 pt’ class=‘msoNormal’ <span> <font> lang=‘en-us’ face="宋体" <b> <font> style=‘mso-bidi- 789face=‘calibre’ font-weight: normal;’ 123 456
  35. 35. 过滤规则• Filter 模式 – margin 0 过滤 – 空 style 过滤 – font 过滤 – 空 span(inline) 标签过滤 – mso 特定名称属性过滤 – ……
  36. 36. 单元测试describe("filter word",function(){ it(“works for bold text",function(){ var html = "<font face=宋体></font><p class=MsoNormal>...."; var filter = { font:function(){return false;},. }; var root = HtmlParser.parse(html); html = HtmlParser.serialize(root,filter); expect(html).toBe("<p>123<b>456</b>789</p>"); });});
  37. 37. 其他兼容性问题• 换行问题 table• 图片选择 tr• IE 选区丢失 td• …….. 123456
  38. 38. KISSY Editor• 简介• 实践• 下一步?
  39. 39. 下一步• I18n 资源全球化• 灵活的主题 theme 架构• 单元测试完善• 紧密结合 KISSY UI
  40. 40. Refer• http://docs.kissyui.com• http://www.w3.org/TR/html5/editing.html#attr-contenteditable• http://msdn.microsoft.com/en- us/library/ie/ms535869(v=vs.85).aspx• http://msdn.microsoft.com/en- us/library/ie/ms535872(v=vs.85).aspx• http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html• http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html• http://en.wikipedia.org/wiki/Interceptor_pattern

×