KISSY Editor 设计(2)          yiminghe@gmail.com       kissyteam@weibo,twitter              yiminghe@twitter              20...
大纲• 1. KISSY Editor 简介• 2. 编辑器基本原理• 3. KISSY Editor 实践  – 3.1 API  – 3.2 设计  – 3.4 使用
KISSY Editor ?
KISSY Editor又一个开源的可视化编辑器底层以及 UI 基于 KISSY 框架编辑核心算法借鉴 CKEditor应用于淘宝商品发布/店铺装修/论坛/….
KISSY Editor
KISSY Editor• Toggle Button• Select
KISSY Editor• Overlay• ContextMenu
KISSY Editor• Bubble
编辑器基本原理
编辑器基本原理• contentEditable• designMode• 使某个元素可编辑  – Iframe.contentWindow.document.body.conten    tEditable = true• http://ww...
编辑器基本原理• document.execCommand
编辑器基本原理• Range/Selection  – IE (<=8)    • Selection: http://msdn.microsoft.com/en-      us/library/ie/ms535869(v=vs.85).as...
编辑器基本原理• Range/Selection  – W3c  – http://www.w3.org/TR/DOM-Level-2-    Traversal-Range/ranges.html  – Selection    • rang...
编辑器基本原理
编辑器基本原理• 根据规范由 javascript 实现浏览器内置的编  辑算法 – http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html                       B...
编辑器基本原理• 编辑 api  – 加粗  – xhtml DTD                            Body               P              P               p         ...
编辑器基本原理• 编辑 api  – 标题 h1                   p            123   strong   789                   456
编辑器基本原理• 编辑 api  – 标题 h1                  h1            123   strong   789                   456
其他兼容性问题• Copy/paste     <font face="宋体"></font><p                 style="margin: 0cm 0cm 0pt;"  – Word         class="MsoN...
其他兼容性问题• 换行 – P / Br ?                   table                    tr                    td                  123456
其他兼容性问题• 图片选择 – 输入内容   • IE/firefox/chrome• 失去焦点选区丢失 – IE• ………
KISSY Editor• API• 设计• 使用
KISSY Editor• 基于 KISSY – 模块化机制 – 组件基础设施   •   事件              KISSY Component   •   属性   •   方法   •   生命周期 – 使用 KISSY UI  ...
API
KISSY.use(“editor”, function (S,Editor){ S.use(“plugin1,plugin2”, function (S,P1,P2){    new Editor({    // …    plugins:[...
继承属性• width/height  – 高宽(包括工具栏与状态栏)• focused  – 是否编辑区起始具备焦点• prefixCls  – 编辑器 UI 样式前缀
继承属性• xclass  – 组件嵌套时的快速生成  new Overlay({   children:[{        xclass: ’editor’,        width:500,        height:500   }] ...
继承属性• srcNode  – 从已有节点生成编辑器组件• render  – 编辑器组件渲染容器
继承属性• listeners  – 方便绑定事件  new Editor({    listeners:{     focus: function(){}  }}).render;• plugins  – 添加插件
编辑器属性• customStyle  – 作用于编辑区域的特有样式• customLink  – 作用于编辑区域的特有样式链接• attachForm  – 绑定所属 form submit 事件
编辑器方法• addButton  – 添加按钮到工具栏• addSelect  – 添加 select 到工具栏• insertHtml  – 插入 html 到光标位置• execCommand  – 执行自定义命令
设计
Editor & pluginsbutton   select     menu    overlay           Edit API                                                    ...
模块• 所有代码都是模块KISSY.add("editor/range",function(S,DOM){},{requires:[dom]});
懒加载• 懒加载非初始模块
懒加载• 使用 KISSY.useKISSY.add("editor/plugin/image",function(S,DOM){  xx.on("click",function(){      S.use("editor/plugin/ima...
按需自动 combo• 仅加载需要的模块  – 最优的链接数与代码引入大小KISSY.use("editor",function(){KISSY.use("editor/plugin/fontSize/,editor/plugin/fontFa...
按需自动 combo
无障碍• Aria in KISSY UI  – Tab 支持  – 所有功能键盘可访问  – Aria 标记• 编辑区域快捷键
插件• 具备介入组件生命周期能力的普通模块  createDOM   renderUI    bindUI   syncUI
插件示例KISSY.add("editor/plugin/bold/index",function(){ function FontSize(cfg){this.cfg=cfg;} FontSize.prototype={      rende...
消息通信• 核心  插件                                         plugin2• 插件  插件editor.fire("selectionChange");                     ...
命令系统• document.execCommand• editor.execCommand editor.execCommand("fontSize","1 8px");                                    ...
单元测试• 部分核心 jasmine
单元测试describe("cloneContents", function () {  it(“works for simple text node”, function () {   var range = new Range(docume...
使用
引入脚本<script src=http://a.tbcdn.cn/s/kissy/1.3.0/seed-min.js></script><!-- or --><script src=http://a.tbcdn.cn/s/kissy/1.3....
载入模块、插件// 自动 comboKISSY.config("combine",true);// editor 核心/种子文件KISSY.use("editor",function(S,Editor){ // editor 插件 S.use(...
初始化• 从已有节点产生 new Editor({  width:,  height:,  srcNode:#editor,  plugins:[       new Plugin1({..}),       Plugin2  ] });
初始化• 全新创建编辑器 new Editor({  width:,  height:,  render:#editorContainer,  plugins:[       new Plugin1({..}),       Plugin2  ...
定制插件• 实现指定接口的普通模块•   editor.addButton•   editor.addSelect•   editor.execCommand•   editor.insertHtml
回顾
• 了解 KISSY Editor• 编辑器基本原理• KISSY Editor 设计
下一步• I18n 全球化• 主题 Theme 架构• 单元测试完善• 紧密结合 KISSY UI
KISSY Editor Design 2
Upcoming SlideShare
Loading in …5
×

KISSY Editor Design 2

1,576 views

Published on

KISSY Editor Design 2 For D2 2012

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,576
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

KISSY Editor Design 2

  1. 1. KISSY Editor 设计(2) yiminghe@gmail.com kissyteam@weibo,twitter yiminghe@twitter 2012.06.25 Draft
  2. 2. 大纲• 1. KISSY Editor 简介• 2. 编辑器基本原理• 3. KISSY Editor 实践 – 3.1 API – 3.2 设计 – 3.4 使用
  3. 3. KISSY Editor ?
  4. 4. KISSY Editor又一个开源的可视化编辑器底层以及 UI 基于 KISSY 框架编辑核心算法借鉴 CKEditor应用于淘宝商品发布/店铺装修/论坛/….
  5. 5. KISSY Editor
  6. 6. KISSY Editor• Toggle Button• Select
  7. 7. KISSY Editor• Overlay• ContextMenu
  8. 8. KISSY Editor• Bubble
  9. 9. 编辑器基本原理
  10. 10. 编辑器基本原理• contentEditable• designMode• 使某个元素可编辑 – Iframe.contentWindow.document.body.conten tEditable = true• http://www.w3.org/TR/html5/editing.html#attr- contenteditable
  11. 11. 编辑器基本原理• document.execCommand
  12. 12. 编辑器基本原理• Range/Selection – IE (<=8) • Selection: http://msdn.microsoft.com/en- us/library/ie/ms535869(v=vs.85).aspx – createRange/clear/empty • Range: http://msdn.microsoft.com/en- us/library/ie/ms535872(v=vs.85).aspx – compareEndPoints/move/select/parentElement
  13. 13. 编辑器基本原理• Range/Selection – W3c – http://www.w3.org/TR/DOM-Level-2- Traversal-Range/ranges.html – Selection • rangeCount/getRangeAt/addRange/removeRange – Range • startContainer/startOffset/endContainer/endOffset
  14. 14. 编辑器基本原理
  15. 15. 编辑器基本原理• 根据规范由 javascript 实现浏览器内置的编 辑算法 – http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html Body P P p 12 34 56 strong 89 7
  16. 16. 编辑器基本原理• 编辑 api – 加粗 – xhtml DTD Body P P p 1 strong strong strong 9 2 34 5678
  17. 17. 编辑器基本原理• 编辑 api – 标题 h1 p 123 strong 789 456
  18. 18. 编辑器基本原理• 编辑 api – 标题 h1 h1 123 strong 789 456
  19. 19. 其他兼容性问题• Copy/paste <font face="宋体"></font><p style="margin: 0cm 0cm 0pt;" – Word class="MsoNormal"><span lang="EN- US"><font face="Calibri">123<b style="mso-bidi-font-weight: normal;">456</b>789<?xml:namespace• Html parser prefix = o ns = "urn:schemas-microsoft- com:office:office" /><o:p></o:p></font></span></p><font face="宋体"></font> 123456789 <p>123<strong>456</strong>789</p>
  20. 20. 其他兼容性问题• 换行 – P / Br ? table tr td 123456
  21. 21. 其他兼容性问题• 图片选择 – 输入内容 • IE/firefox/chrome• 失去焦点选区丢失 – IE• ………
  22. 22. KISSY Editor• API• 设计• 使用
  23. 23. KISSY Editor• 基于 KISSY – 模块化机制 – 组件基础设施 • 事件 KISSY Component • 属性 • 方法 • 生命周期 – 使用 KISSY UI KISSY Editor
  24. 24. API
  25. 25. KISSY.use(“editor”, function (S,Editor){ S.use(“plugin1,plugin2”, function (S,P1,P2){ new Editor({ // … plugins:[ new P1({…}), P2 ]});});});不启用自动 combine 时推荐 use ”editor/full”
  26. 26. 继承属性• width/height – 高宽(包括工具栏与状态栏)• focused – 是否编辑区起始具备焦点• prefixCls – 编辑器 UI 样式前缀
  27. 27. 继承属性• xclass – 组件嵌套时的快速生成 new Overlay({ children:[{ xclass: ’editor’, width:500, height:500 }] });
  28. 28. 继承属性• srcNode – 从已有节点生成编辑器组件• render – 编辑器组件渲染容器
  29. 29. 继承属性• listeners – 方便绑定事件 new Editor({ listeners:{ focus: function(){} }}).render;• plugins – 添加插件
  30. 30. 编辑器属性• customStyle – 作用于编辑区域的特有样式• customLink – 作用于编辑区域的特有样式链接• attachForm – 绑定所属 form submit 事件
  31. 31. 编辑器方法• addButton – 添加按钮到工具栏• addSelect – 添加 select 到工具栏• insertHtml – 插入 html 到光标位置• execCommand – 执行自定义命令
  32. 32. 设计
  33. 33. Editor & pluginsbutton select menu overlay Edit API Html Parser component range selection & xhtml dtd dom event node ua base KISSY Loader
  34. 34. 模块• 所有代码都是模块KISSY.add("editor/range",function(S,DOM){},{requires:[dom]});
  35. 35. 懒加载• 懒加载非初始模块
  36. 36. 懒加载• 使用 KISSY.useKISSY.add("editor/plugin/image",function(S,DOM){ xx.on("click",function(){ S.use("editor/plugin/image/dialog"); });});
  37. 37. 按需自动 combo• 仅加载需要的模块 – 最优的链接数与代码引入大小KISSY.use("editor",function(){KISSY.use("editor/plugin/fontSize/,editor/plugin/fontFamily/",function(){// use plugins});});
  38. 38. 按需自动 combo
  39. 39. 无障碍• Aria in KISSY UI – Tab 支持 – 所有功能键盘可访问 – Aria 标记• 编辑区域快捷键
  40. 40. 插件• 具备介入组件生命周期能力的普通模块 createDOM renderUI bindUI syncUI
  41. 41. 插件示例KISSY.add("editor/plugin/bold/index",function(){ function FontSize(cfg){this.cfg=cfg;} FontSize.prototype={ renderUI:function(editor){ editor.addButton(...); } }; return FontSize;});
  42. 42. 消息通信• 核心  插件 plugin2• 插件  插件editor.fire("selectionChange"); editoreditor.on("selectionChange",function(){ plugin3 Plugin1});
  43. 43. 命令系统• document.execCommand• editor.execCommand editor.execCommand("fontSize","1 8px"); fontFamily editor.execCommand("fontFamily", fontSize bold "kaiti"); editor.execCommand("bold",true); editor
  44. 44. 单元测试• 部分核心 jasmine
  45. 45. 单元测试describe("cloneContents", function () { it(“works for simple text node”, function () { var range = new Range(document); range.setStart(text, 2); range.setEnd(text, 5); var f = range.cloneContents(); var newDiv = KISSY.all("<div>").appendTo("body"); newDiv.append(f); expect(myHtml(newDiv)).toBe("345"); });});
  46. 46. 使用
  47. 47. 引入脚本<script src=http://a.tbcdn.cn/s/kissy/1.3.0/seed-min.js></script><!-- or --><script src=http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js></script>
  48. 48. 载入模块、插件// 自动 comboKISSY.config("combine",true);// editor 核心/种子文件KISSY.use("editor",function(S,Editor){ // editor 插件 S.use("editor/plugin1,editor/plugin2...", function(S,Plugin1,Plugin2){});});
  49. 49. 初始化• 从已有节点产生 new Editor({ width:, height:, srcNode:#editor, plugins:[ new Plugin1({..}), Plugin2 ] });
  50. 50. 初始化• 全新创建编辑器 new Editor({ width:, height:, render:#editorContainer, plugins:[ new Plugin1({..}), Plugin2 ] });
  51. 51. 定制插件• 实现指定接口的普通模块• editor.addButton• editor.addSelect• editor.execCommand• editor.insertHtml
  52. 52. 回顾
  53. 53. • 了解 KISSY Editor• 编辑器基本原理• KISSY Editor 设计
  54. 54. 下一步• I18n 全球化• 主题 Theme 架构• 单元测试完善• 紧密结合 KISSY UI

×