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
65
SeaJS TUI实践
luolonghao
0
91
Other Decks in Technology
See All in Technology
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
440
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
270
AWSで始める実践Dagster入門
kitagawaz
1
630
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
480
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
20250913_JAWS_sysad_kobe
takuyay0ne
2
230
テストを軸にした生き残り術
kworkdev
PRO
0
210
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Building an army of robots
kneath
306
46k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How STYLIGHT went responsive
nonsquared
100
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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]
谢谢大家