KindEditor 设计思路 V2

KindEditor 设计思路 V2

Transcript

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