![加粗测试（ 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>');
});](https://image.slidesharecdn.com/kindeditor-architecture-120625040042-phpapp01/85/Kindeditor-33-320.jpg)
Kindeditor 设计思路
- 1. KindEditor 设计思路 2012. 7. 7
- 3. Team ? 罗龙浩（ Roddy ） ? www.weibo.com/luolonghao ? luolonghao@gmail.com ? luolonghao@hotmail.com
- 4. 历史版本
- 5. KindEditor 1.0 2005 年 12 月
- 6. KindEditor 2.0 2006 年 7 月
- 7. KindEditor 3.0 2009 年 1 月
- 8. KindEditor 4.0 2011 年 8 月
- 10. 富文本编辑器 样式系统 UI 组件 ? 样式系统： Bold, Insert HTML, Hyperlink, … ? UI 组件： Dialog, Menu, Tabs, Button, …
- 11. 设计理念
- 12. 只包含最常用的功能
- 13. 只包含最常用的功能
- 14. 核心不基于第三方类库 KindEditor 4.1.1 – 28.9KB jQuery 1.7.2 – 32.9KB 原因：其它类库不包含 Range 、 Command
- 15. 兼容性，稳定性 连 IE6 都兼容的编辑器 稳定压倒一切 单元测试，人肉测试，自动化测试
- 18. 文件、代码结构
- 19. 目录结构 themes/ common/ default/ plugins/ image/ table/ … lang/ zh_CN.js … kindeditor-min.js
- 20. 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
- 21. JS 模块 ? Core – 基础 ? Event – 事件 ? Node – 处理 Element ，类似 jQuery 接口 ? Range – 范围， W3C 标准 ? Command – 样式命令 ? Edit – 编辑框 ? Html – HTML 格式化 ? Toolbar – 工具栏 ? Menu – 下拉菜单 ? Dialog – 弹出框 ? ColorPicker – 取色器 ? … ? Main – 组装编辑器 一个模块一个文件，可单独调用
- 22. kindeditor.js 代码结构 (function (window, undefined) { var K = function() {}; K.range = function() {}; K.cmd = function(){}; K.edit = function(){}; K.create = function(){}; window.KindEditor = K; })(window);
- 23. header.js 代码 (function (window, undefined) { if (window.KindEditor) { return; }
- 25. core.js 代码结构 var _VERSION = ‘4.1.1’; var _IE = ...; var _GECKO = …; var _inArray = function(){ … }; var _trim = function(){ … }; var _each = function(){ … }; var _extend = function(){ … }; … 下划线（ _ ）开头表示跨文件的变量、函数
- 26. event.js 部分代码 … if (_IE) { window.attachEvent('onunload', function() { _each(_eventData, function(key, events) { if (events.el) { _unbind(events.el); } }); }); }
- 27. 重点模块
- 28. 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
- 29. 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
- 30. Command 模块 对应 execCommand KindEditor.ready(function(K) { var cmd = K.cmd(document); cmd.bold(); cmd.inserthtml(‘<div>text</div>’); }); Reference: http://www.kindsoft.net/docs/cmd.html
- 31. 单元测试
- 33. 加粗测试（ 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>'); });
- 34. 自动化测试
- 36. 加粗测试（ 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();
- 37. KindEditor 缺点 ? HTML 解析基于正则 ? 有些功能基于 execCommand ? 有些模块缺少单元测试
- 38. 谢谢