Kindeditor 设计思路
-
Upload
luolonghao -
Category
Technology
-
view
644 -
download
9
description
Transcript of Kindeditor 设计思路
![Page 1: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/1.jpg)
KindEditor 设计思路
2012. 7. 7
![Page 2: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/2.jpg)
KindEditor Project
定位:轻量级富文本编辑器
源码: http://github.com/kindsoft/kindeditor
![Page 3: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/3.jpg)
• 罗龙浩( Roddy)• www.weibo.com/luolonghao
Team
![Page 4: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/4.jpg)
历史版本
![Page 5: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/5.jpg)
2005年 12月
KindEditor 1.0
![Page 6: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/6.jpg)
2006年 7月
KindEditor 2.0
![Page 7: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/7.jpg)
2009年 1月
KindEditor 3.0
![Page 8: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/8.jpg)
2011年 8月
KindEditor 4.0
![Page 9: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/9.jpg)
Who is using?
![Page 10: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/10.jpg)
样式系统 UI组件
富文本编辑器
• 样式系统: Bold, Insert HTML, Hyperlink, …• UI组件: Dialog, Menu, Tabs, Button, …
![Page 11: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/11.jpg)
设计理念
![Page 12: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/12.jpg)
只包含最常用的功能
![Page 13: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/13.jpg)
只包含最常用的功能
![Page 14: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/14.jpg)
KindEditor 4.1.1 – 28.9KB
jQuery 1.7.2 – 32.9KB
原因:其它类库不包含 Range、 Command
核心不基于第三方类库
![Page 15: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/15.jpg)
单元测试,人肉测试,自动化测试
连 IE6都兼容的编辑器
稳定压倒一切
兼容性,稳定性
![Page 16: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/16.jpg)
定制风格,自定义插件、多语言
可定制,可扩展
![Page 17: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/17.jpg)
点击
加载
执行
模块化,按需加载
![Page 18: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/18.jpg)
文件、代码结构
![Page 19: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/19.jpg)
themes/common/default/
plugins/image/table/…
lang/zh_CN.js…
kindeditor-min.js
目录结构
![Page 20: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/20.jpg)
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
![Page 21: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/21.jpg)
• Core – 基础• Event – 事件• Node – 处理 Element,类似 jQuery接口• Range – 范围,W3C标准• Command – 样式命令• Edit – 编辑框• Html – HTML格式化• Toolbar – 工具栏• Menu – 下拉菜单• Dialog – 弹出框• ColorPicker – 取色器• …• Main – 组装编辑器
一个模块一个文件,可单独调用
JS模块
![Page 22: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/22.jpg)
kindeditor.js代码结构
(function (window, undefined) {var K = function() {};
K.range = function() {};
K.cmd = function(){};
K.edit = function(){};
K.create = function(){};
window.KindEditor = K;
})(window);
![Page 23: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/23.jpg)
header.js代码
(function (window, undefined) {
if (window.KindEditor) {
return;
}
![Page 24: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/24.jpg)
footer.js代码
})(window);
![Page 25: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/25.jpg)
core.js代码结构
var _VERSION = ‘4.1.1’;var _IE = ...;var _GECKO = …;var _inArray = function(){ … };var _trim = function(){ … };var _each = function(){ … };var _extend = function(){ … };…
下划线( _)开头表示跨文件的变量、函数
![Page 26: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/26.jpg)
event.js部分代码
…if (_IE) {
window.attachEvent('onunload', function() {_each(_eventData, function(key, events) {
if (events.el) {_unbind(events.el);
}});
});}
![Page 27: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/27.jpg)
重点模块
![Page 28: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/28.jpg)
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缩小版
![Page 29: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/29.jpg)
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标准
![Page 30: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/30.jpg)
KindEditor.ready(function(K) {
var cmd = K.cmd(document);
cmd.bold();
cmd.inserthtml(‘<div>text</div>’);
});
Command模块
Reference: http://www.kindsoft.net/docs/cmd.html
对应 execCommand
![Page 31: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/31.jpg)
单元测试
![Page 32: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/32.jpg)
QUnit
每个模块有对应的单元测试
http://localhost/kindeditor/test/cmd.html
![Page 33: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/33.jpg)
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)
![Page 34: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/34.jpg)
自动化测试
![Page 35: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/35.jpg)
Selenium
java -jar selenium-server-standalone-2.21.0.jar
![Page 36: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/36.jpg)
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)
![Page 37: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/37.jpg)
• HTML解析基于正则• 有些功能基于 execCommand
• 有些模块缺少单元测试
KindEditor 缺点
![Page 38: Kindeditor 设计思路](https://reader033.fdocuments.net/reader033/viewer/2022061221/54bd88734a7959913b8b4630/html5/thumbnails/38.jpg)
谢谢