Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KindEditor 设计思路 V2
Search
luolonghao
July 18, 2012
Technology
1
180
KindEditor 设计思路 V2
KindEditor 设计思路 V2
luolonghao
July 18, 2012
Tweet
Share
More Decks by luolonghao
See All by luolonghao
About HRT and TPM
luolonghao
0
63
SeaJS TUI实践
luolonghao
0
91
Other Decks in Technology
See All in Technology
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
23
6.2k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Bash Introduction
62gerente
613
210k
Practical Orchestrator
shlominoach
189
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Gamification - CAS2011
davidbonilla
81
5.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
KindEditor 设计思路 2012. 7. 7
KindEditor Project 轻量级富文本编辑器 源码:http://github.com/kindsoft/kindeditor
Who is using?
设计理念
只包含最常用的功能
只包含最常用的功能
KindEditor 4.1.1 – 28.9KB jQuery 1.7.2 – 32.9KB 原因:其它类库不包含Range、Command 核心不基于第三方类库
单元测试,人肉测试,自动化测试 连IE6都兼容的编辑器 稳定压倒一切 兼容性,稳定性
定制风格,自定义插件、多语言 可定制,可扩展
点击 加载 执行 模块化,按需加载
样式系统 UI组件 富文本编辑器结构 • 样式系统:Bold, foreColor, Hyperlink, … • UI组件:Dialog,
Menu, Tabs, Button, …
文件、代码结构
themes/ default/ … plugins/ image/ … lang/ zh_CN.js … src/
core.js … kindeditor-min.js 目录结构
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
• Core – 基础 • Event – 事件 • Node
– 处理Element,类似jQuery接口 • Range – 范围,W3C标准 • Command – 样式命令 • Edit – 编辑框 • Html – HTML格式化 • Toolbar – 工具栏 • Menu – 下拉菜单 • Dialog – 弹出框 • ColorPicker – 取色器 • … • Main – 组装编辑器 一个模块一个文件,可单独调用 JS模块
kindeditor.js代码结构 (function (window, undefined) { var K = function() {};
K.range = function() {}; K.cmd = function(){}; K.edit = function(){}; K.create = function(){}; window.KindEditor = K; })(window);
header.js代码 (function (window, undefined) { if (window.KindEditor) { return; }
footer.js代码 })(window);
core.js代码结构 var _VERSION = ‘4.1.1’; var _IE = ...; var
_GECKO = …; var _inArray = function(){ … }; var _trim = function(){ … }; var _each = function(){ … }; var _extend = function(){ … }; … 下划线(_)开头表示跨文件的变量、函数
event.js部分代码 … if (_IE) { window.attachEvent('onunload', function() { _each(_eventData, function(key,
events) { if (events.el) { _unbind(events.el); } }); }); }
重点模块
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缩小版
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标准
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
如何把文字改成红色?
第七届前端技术论坛 选中“前端”,把文字颜色改成红色 ForeColor
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>技术论坛 理想: 现实:
最后输出HTML时统一标签? 也有问题: 在IE下execCommand(‘removeformat’)无 法清理span。
抛弃execCommand 1.取得选中的Range 2.遍历Range,寻找文本 3.分割文本 4.文本加span 5.重新选中
取得选中的Range var sel = document.selection || window.getSelection(); if (document.selection) {
nativeRange = sel.createRange(); } else { nativeRange = sel.getRangeAt(0); } var keRange = K.range(nativeRange);
遍历Range,寻找文本 // 遍历range的共同祖先下的所有节点 if (range.contains(node) && isTextNode(node)) { // 要处理的node
}
分割文本 // textNode:第七届前端技术论坛 node = textNode.splitText(3); // textNode:第七届 // node:前端技术论坛
centerNode.split(2); // node:前端 一个文本节点变成三个文本节点
文本加span // 第七届前端技术论坛 var span = document.createElement(‘span’); span.style.color = ‘#f00’;
node.parentNode.insertBefore(span, node); span.parentNode.appendChild(node); //第七届<span style=“color:#f00;”>前端 </span>技术论坛
重新选中 var nativeRange = keRange.get(); if (IE) { nativeRange.select(); }
else { sel.removeAllRanges(); sel.addRange(nativeRange); }
测试
QUnit 每个模块有对应的单元测试 http://localhost/kindeditor/test/cmd.html
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)
Selenium java -jar selenium-server-standalone-2.21.0.jar
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)
• 罗龙浩(Roddy) • www.weibo.com/luolonghao •
[email protected]
谢谢大家