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
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
490
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
280
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
GitHub Copilot の概要
tomokusaba
1
140
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
160
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
570
Witchcraft for Memory
pocke
1
640
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
680
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
150
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
How to Ace a Technical Interview
jacobian
277
23k
Gamification - CAS2011
davidbonilla
81
5.3k
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]
谢谢大家