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
69
SeaJS TUI实践
luolonghao
0
93
Other Decks in Technology
See All in Technology
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
0gm
0
770
学生・新卒・ジュニアから目指すSRE
hiroyaonoe
2
550
15 years with Rails and DDD (AI Edition)
andrzejkrzywda
0
180
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
oracle4engineer
PRO
2
14k
システムのアラート調査をサポートするAI Agentの紹介/Introduction to an AI Agent for System Alert Investigation
taddy_919
2
1.9k
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
1
270
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
42k
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
torounit
0
450
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.3k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ― Qiita AI Summit
noalisaai
1
370
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
slsops
2
210
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
250
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
79
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
Facilitating Awesome Meetings
lara
57
6.7k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
110
Designing for humans not robots
tammielis
254
26k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.4k
How to Talk to Developers About Accessibility
jct
2
130
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.2k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
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]
谢谢大家