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
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.4k
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
190
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
170
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
170
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
140
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1.5k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
130
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
180
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
430
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
440
Rustから学ぶ 非同期処理の仕組み
skanehira
1
110
Featured
See All Featured
Building an army of robots
kneath
306
46k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
4 Signs Your Business is Dying
shpigford
184
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
BBQ
matthewcrist
89
9.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Making Projects Easy
brettharned
117
6.4k
Side Projects
sachag
455
43k
It's Worth the Effort
3n
187
28k
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]
谢谢大家