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.

Kindeditor设计思路v2

760 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Kindeditor设计思路v2

  1. 1. KindEditor 设计思路 2012. 7. 7
  2. 2. KindEditor Project轻量级富文本编辑器源码:http://github.com/kindsoft/kindeditor
  3. 3. Who is using?
  4. 4. 设计理念
  5. 5. 只包含最常用的功能
  6. 6. 只包含最常用的功能
  7. 7. 核心不基于第三方类库 KindEditor 4.1.1 – 28.9KB jQuery 1.7.2 – 32.9KB原因:其它类库不包含Range、Command
  8. 8. 兼容性,稳定性 连IE6都兼容的编辑器 稳定压倒一切单元测试,人肉测试,自动化测试
  9. 9. 可定制,可扩展定制风格,自定义插件、多语言
  10. 10. 模块化,按需加载点击加载执行
  11. 11. 富文本编辑器结构 样式系统 UI组件• 样式系统:Bold, foreColor, Hyperlink, …• UI组件:Dialog, Menu, Tabs, Button, …
  12. 12. 文件、代码结构
  13. 13. 目录结构themes/ default/ …plugins/ image/ …lang/ zh_CN.js …src/ core.js …kindeditor-min.js
  14. 14. JS源文件 • header.js 1KB • core.js 7KB • event.js 9KB • node.js 14KB • range.js 22KB • cmd.js 23KB • edit.js 9KB • toolbar.js 4KB • menu.js 3KB • dialog.js 5KB • … • main.js 42KB • footer.js 1KB执行ant,生成kindeditor-min.js
  15. 15. JS模块• Core – 基础• Event – 事件• Node – 处理Element,类似jQuery接口• Range – 范围,W3C标准• Command – 样式命令• Edit – 编辑框• Html – HTML格式化• Toolbar – 工具栏• Menu – 下拉菜单• Dialog – 弹出框• ColorPicker – 取色器• …• Main – 组装编辑器一个模块一个文件,可单独调用
  16. 16. kindeditor.js代码结构(function (window, undefined) { var K = function() {}; K.range = function() {}; K.cmd = function(){}; K.edit = function(){}; K.create = function(){}; window.KindEditor = K;})(window);
  17. 17. header.js代码(function (window, undefined) { if (window.KindEditor) { return; }
  18. 18. footer.js代码})(window);
  19. 19. core.js代码结构var _VERSION = ‘4.1.1’;var _IE = ...;var _GECKO = …;var _inArray = function(){ … };var _trim = function(){ … };var _each = function(){ … };var _extend = function(){ … };…下划线(_)开头表示跨文件的变量、函数
  20. 20. event.js部分代码…if (_IE) { window.attachEvent(onunload, function() { _each(_eventData, function(key, events) { if (events.el) { _unbind(events.el); } }); });}
  21. 21. 重点模块
  22. 22. Node模块 面向编辑器的jQuery缩小版KindEditor.ready(function(K) { K(‘#id div’).click(function(e) { K(this). addClass(‘my-class’); });});Reference: http://www.kindsoft.net/docs/node.html
  23. 23. Range模块 90% W3C标准KindEditor.ready(function(K) { var range = K.range(document); range.selectNodeContents(element); range.insertNode(node);});Reference: http://www.kindsoft.net/docs/range.html
  24. 24. Command模块 对应execCommandKindEditor.ready(function(K) { var cmd = K.cmd(document); cmd.forecolor(‘#000’); cmd.inserthtml(‘<div>text</div>’);});Reference: http://www.kindsoft.net/docs/cmd.html
  25. 25. 如何把文字改成红色?
  26. 26. ForeColor第七届前端技术论坛选中“前端”,把文字颜色改成红色
  27. 27. document.execCommand?理想:第七届<span style=“color:#ff0000;">前端</span>技术论坛现实:IE:第七届<font color=“#ff0000”>前端</font>技术论坛Chrome:第七届<font class="Apple-style-span" color="#ff0000">前端</font>技术论坛Firefox:第七届<span style="color: rgb(255, 0, 0)">前端 </span>技术论坛
  28. 28. 最后输出HTML时统一标签?也有问题:在IE下execCommand(‘removeformat’)无 法清理span。
  29. 29. 抛弃execCommand1.取得选中的Range2.遍历Range,寻找文本3.分割文本4.文本加span5.重新选中
  30. 30. 取得选中的Rangevar sel = document.selection || window.getSelection();if (document.selection) { nativeRange = sel.createRange();} else { nativeRange = sel.getRangeAt(0);}var keRange = K.range(nativeRange);
  31. 31. 遍历Range,寻找文本// 遍历range的共同祖先下的所有节点if (range.contains(node) && isTextNode(node)) { // 要处理的node}
  32. 32. 分割文本// textNode:第七届前端技术论坛node = textNode.splitText(3);// textNode:第七届// node:前端技术论坛centerNode.split(2);// node:前端一个文本节点变成三个文本节点
  33. 33. 文本加span// 第七届前端技术论坛var span = document.createElement(‘span’);span.style.color = ‘#f00’;node.parentNode.insertBefore(span, node);span.parentNode.appendChild(node);//第七届<span style=“color:#f00;”>前端 </span>技术论坛
  34. 34. 重新选中var nativeRange = keRange.get();if (IE) { nativeRange.select();} else { sel.removeAllRanges(); sel.addRange(nativeRange);}
  35. 35. 测试
  36. 36. QUnit http://localhost/kindeditor/test/cmd.html每个模块有对应的单元测试
  37. 37. 加粗测试(1)test(cmd.bold, function() { var div = K(<div/>).html(‘abc); var range = K.range(document); range.selectNodeContents(div[0]); K.cmd(range).bold(); equals(range.html(), <strong>abc</strong>);});
  38. 38. Seleniumjava -jar selenium-server-standalone-2.21.0.jar
  39. 39. 加粗测试(2)require_once /KindEditorDriver.php;$driver = new KindEditorDriver(test/total.html);$driver->html();$driver->clickToolbar(bold);$driver->input(abc);equals($driver->html(), <strong>abc</strong>);$driver->close();
  40. 40. 谢谢大家• 罗龙浩(Roddy)• www.weibo.com/luolonghao• luolonghao@gmail.com

×