Suche senden
Hochladen
Kind editor设计思路
•
0 gefällt mir
•
1,683 views
taobao.com
Folgen
Technologie
Bildung
Melden
Teilen
Melden
Teilen
1 von 38
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
Berserk js
Berserk js
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
Empfohlen
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
Berserk js
Berserk js
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
Kindeditor 设计思路
Kindeditor 设计思路
luolonghao
编辑器设计2
编辑器设计2
yiming he
前端MVVM框架安全
前端MVVM框架安全
Borg Han
KISSY for starter
KISSY for starter
yiming he
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
Class 20170126
Class 20170126
Ivan Wei
Koubei banquet 34
Koubei banquet 34
Koubei UED
Kindeditor设计思路v2
Kindeditor设计思路v2
luolonghao
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
Node develop expirements
Node develop expirements
aleafs
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
不一樣的 Web Server coServ Part II
不一樣的 Web Server coServ Part II
Ben Lue
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
Web coding principle
Web coding principle
ZongYing Lyu
ASP.Net MVC Framework
ASP.Net MVC Framework
國昭 張
Blazor Component 開發實戰
Blazor Component 開發實戰
Gelis Wu
Inside the-browser
Inside the-browser
jy03845581
Construction Insolvency
Construction Insolvency
Francis Ho
Splinternetmarketing Ranking Report Internet Marketing
Splinternetmarketing Ranking Report Internet Marketing
SEO, LLC dba www.SplinternetMarketing.com
Weitere ähnliche Inhalte
Was ist angesagt?
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Jimmy Ho
Kindeditor 设计思路
Kindeditor 设计思路
luolonghao
编辑器设计2
编辑器设计2
yiming he
前端MVVM框架安全
前端MVVM框架安全
Borg Han
KISSY for starter
KISSY for starter
yiming he
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
Class 20170126
Class 20170126
Ivan Wei
Koubei banquet 34
Koubei banquet 34
Koubei UED
Kindeditor设计思路v2
Kindeditor设计思路v2
luolonghao
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
Node develop expirements
Node develop expirements
aleafs
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
不一樣的 Web Server coServ Part II
不一樣的 Web Server coServ Part II
Ben Lue
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
Web coding principle
Web coding principle
ZongYing Lyu
ASP.Net MVC Framework
ASP.Net MVC Framework
國昭 張
Blazor Component 開發實戰
Blazor Component 開發實戰
Gelis Wu
Inside the-browser
Inside the-browser
jy03845581
Was ist angesagt?
(20)
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
Kindeditor 设计思路
Kindeditor 设计思路
编辑器设计2
编辑器设计2
前端MVVM框架安全
前端MVVM框架安全
KISSY for starter
KISSY for starter
KISSY Editor Design 2
KISSY Editor Design 2
Class 20170126
Class 20170126
Koubei banquet 34
Koubei banquet 34
Kindeditor设计思路v2
Kindeditor设计思路v2
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Node develop expirements
Node develop expirements
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
不一樣的 Web Server coServ Part II
不一樣的 Web Server coServ Part II
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Web coding principle
Web coding principle
ASP.Net MVC Framework
ASP.Net MVC Framework
Blazor Component 開發實戰
Blazor Component 開發實戰
Inside the-browser
Inside the-browser
Andere mochten auch
Construction Insolvency
Construction Insolvency
Francis Ho
Splinternetmarketing Ranking Report Internet Marketing
Splinternetmarketing Ranking Report Internet Marketing
SEO, LLC dba www.SplinternetMarketing.com
Y O G A A N D S T R E S S Dr
Y O G A A N D S T R E S S Dr
shriniwaskashalikar
Chapter 02 planet earth is alive - but not well
Chapter 02 planet earth is alive - but not well
Interzone Inc,Affiliate Partner of Google Inc
Atténuation des risques liés aux applications mobiles afin de garantir des dé...
Atténuation des risques liés aux applications mobiles afin de garantir des dé...
Flexera
Simplifying social business
Simplifying social business
Kathy Herrmann
Techspo 2010 ver. 2
Techspo 2010 ver. 2
MHS
Berpikir Kreatif I
Berpikir Kreatif I
guest361b2c
世界各地歌劇院
世界各地歌劇院
Josephine C
Corruption Shriniwas Kashalikar
Corruption Shriniwas Kashalikar
shriniwaskashalikar
Mauna (Silence) & Superliving Dr Shriniwas Kashalikar
Mauna (Silence) & Superliving Dr Shriniwas Kashalikar
shriniwaskashalikar
絕美冰域 南極
絕美冰域 南極
Josephine C
為人的藝術
為人的藝術
Josephine C
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
shriniwaskashalikar
Common Licensing Layer Build and Assist
Common Licensing Layer Build and Assist
Flexera
幸運星繁體簡報
幸運星繁體簡報
guest74e2881
Mrs Tabby Gray
Mrs Tabby Gray
Eunice Rivera
Personal Branding For Job Seekers
Personal Branding For Job Seekers
Stephen Murphy
光電塗鴉
光電塗鴉
Josephine C
Social Monitoring Tools -- Considerations and Selection
Social Monitoring Tools -- Considerations and Selection
Kathy Herrmann
Andere mochten auch
(20)
Construction Insolvency
Construction Insolvency
Splinternetmarketing Ranking Report Internet Marketing
Splinternetmarketing Ranking Report Internet Marketing
Y O G A A N D S T R E S S Dr
Y O G A A N D S T R E S S Dr
Chapter 02 planet earth is alive - but not well
Chapter 02 planet earth is alive - but not well
Atténuation des risques liés aux applications mobiles afin de garantir des dé...
Atténuation des risques liés aux applications mobiles afin de garantir des dé...
Simplifying social business
Simplifying social business
Techspo 2010 ver. 2
Techspo 2010 ver. 2
Berpikir Kreatif I
Berpikir Kreatif I
世界各地歌劇院
世界各地歌劇院
Corruption Shriniwas Kashalikar
Corruption Shriniwas Kashalikar
Mauna (Silence) & Superliving Dr Shriniwas Kashalikar
Mauna (Silence) & Superliving Dr Shriniwas Kashalikar
絕美冰域 南極
絕美冰域 南極
為人的藝術
為人的藝術
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
R E M E D I E S I F O U N D U S E F U L I N J O I N T P A I N S D R S...
Common Licensing Layer Build and Assist
Common Licensing Layer Build and Assist
幸運星繁體簡報
幸運星繁體簡報
Mrs Tabby Gray
Mrs Tabby Gray
Personal Branding For Job Seekers
Personal Branding For Job Seekers
光電塗鴉
光電塗鴉
Social Monitoring Tools -- Considerations and Selection
Social Monitoring Tools -- Considerations and Selection
Ähnlich wie Kind editor设计思路
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
Script with engine
Script with engine
Webrebuild
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Bo-Yi Wu
JavaScript Engine
JavaScript Engine
jay li
Html5培训内容
Html5培训内容
Jun Yu
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
Kissy editor开发与设计
Kissy editor开发与设计
yiming he
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
Shengyou Fan
Js doc toolkit
Js doc toolkit
jay li
Web development with zend framework
Web development with zend framework
thinkinlamp
a glance of Javascript module
a glance of Javascript module
zipeng zhang
前端测试
前端测试
frontwindysky
前端测试
前端测试
Zheng Biao
JdonFramework中文
JdonFramework中文
banq jdon
jsdoc-toolkit
jsdoc-toolkit
satans17
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
基于Eclipse和hadoop平台应用开发入门手册
基于Eclipse和hadoop平台应用开发入门手册
Zhen Li
2023-netconf-deploy-azure-function-with-KEDA-on-aks
2023-netconf-deploy-azure-function-with-KEDA-on-aks
Roberson Liou
Html5和css3入门
Html5和css3入门
Xiujun Ma
Ähnlich wie Kind editor设计思路
(20)
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Script with engine
Script with engine
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
JavaScript Engine
JavaScript Engine
Html5培训内容
Html5培训内容
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Kissy editor开发与设计
Kissy editor开发与设计
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
Js doc toolkit
Js doc toolkit
Web development with zend framework
Web development with zend framework
a glance of Javascript module
a glance of Javascript module
前端测试
前端测试
前端测试
前端测试
JdonFramework中文
JdonFramework中文
jsdoc-toolkit
jsdoc-toolkit
Spring 2.x 中文
Spring 2.x 中文
基于Eclipse和hadoop平台应用开发入门手册
基于Eclipse和hadoop平台应用开发入门手册
2023-netconf-deploy-azure-function-with-KEDA-on-aks
2023-netconf-deploy-azure-function-with-KEDA-on-aks
Html5和css3入门
Html5和css3入门
Mehr von taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
Java script physical engine
Java script physical engine
taobao.com
Html5环保小游戏
Html5环保小游戏
taobao.com
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
taobao.com
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
前端Mvc探讨及实践
前端Mvc探讨及实践
taobao.com
黄希彤:【无障碍访问】Margin
黄希彤:【无障碍访问】Margin
taobao.com
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
taobao.com
西乔:理性的设计
西乔:理性的设计
taobao.com
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
taobao.com
More weapons, more power
More weapons, more power
taobao.com
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
taobao.com
【前端Mvc】之豆瓣说实践
【前端Mvc】之豆瓣说实践
taobao.com
Mehr von taobao.com
(20)
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Java script physical engine
Java script physical engine
Html5环保小游戏
Html5环保小游戏
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
张平:JavaScript引擎实现
张平:JavaScript引擎实现
高力:19楼现有前端架构
高力:19楼现有前端架构
李成银:前端编译平台
李成银:前端编译平台
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
前端Mvc探讨及实践
前端Mvc探讨及实践
黄希彤:【无障碍访问】Margin
黄希彤:【无障碍访问】Margin
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
西乔:理性的设计
西乔:理性的设计
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
杨永全:【组障碍访问】一个盲人眼中的网页内容无障碍体验与设计 大纲
More weapons, more power
More weapons, more power
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
【前端Mvc】之豆瓣说实践
【前端Mvc】之豆瓣说实践
Kind editor设计思路
1.
KindEditor 设计思路
2012. 7. 7
2.
KindEditor Project 定位:轻量级富文本编辑器 源码:http://github.com/kindsoft/kindeditor
3.
Team •
罗龙浩(Roddy) • www.weibo.com/luolonghao • luolonghao@gmail.com • luolonghao@hotmail.com
4.
历史版本
5.
KindEditor 1.0
2005年12月
6.
KindEditor 2.0
2006年7月
7.
KindEditor 3.0
2009年1月
8.
KindEditor 4.0
2011年8月
9.
Who is using?
10.
富文本编辑器
样式系统 UI组件 • 样式系统:Bold, Insert HTML, Hyperlink, … • UI组件:Dialog, Menu, Tabs, Button, …
11.
设计理念
12.
只包含最常用的功能
13.
只包含最常用的功能
14.
核心不基于第三方类库 KindEditor 4.1.1
– 28.9KB jQuery 1.7.2 – 32.9KB 原因:其它类库不包含Range、Command
15.
兼容性,稳定性 连IE6都兼容的编辑器
稳定压倒一切 单元测试,人肉测试,自动化测试
16.
可定制,可扩展 定制风格,自定义插件、多语言
17.
模块化,按需加载 点击 加载 执行
18.
文件、代码结构
19.
目录结构 themes/
common/ default/ plugins/ image/ table/ … lang/ zh_CN.js … kindeditor-min.js
20.
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
21.
JS模块 •
Core – 基础 • Event – 事件 • Node – 处理Element,类似jQuery接口 • Range – 范围,W3C标准 • Command – 样式命令 • Edit – 编辑框 • Html – HTML格式化 • Toolbar – 工具栏 • Menu – 下拉菜单 • Dialog – 弹出框 • ColorPicker – 取色器 • … • Main – 组装编辑器 一个模块一个文件,可单独调用
22.
kindeditor.js代码结构 (function (window, undefined)
{ var K = function() {}; K.range = function() {}; K.cmd = function(){}; K.edit = function(){}; K.create = function(){}; window.KindEditor = K; })(window);
23.
header.js代码 (function (window, undefined)
{ if (window.KindEditor) { return; }
24.
footer.js代码 })(window);
25.
core.js代码结构 var _VERSION =
‘4.1.1’; var _IE = ...; var _GECKO = …; var _inArray = function(){ … }; var _trim = function(){ … }; var _each = function(){ … }; var _extend = function(){ … }; … 下划线(_)开头表示跨文件的变量、函数
26.
event.js部分代码 … if (_IE) {
window.attachEvent('onunload', function() { _each(_eventData, function(key, events) { if (events.el) { _unbind(events.el); } }); }); }
27.
重点模块
28.
Node模块
面向编辑器的jQuery缩小版 KindEditor.ready(function(K) { K(‘#id div’).click(function(e) { K(this). addClass(‘my-class’); }); }); Reference: http://www.kindsoft.net/docs/node.html
29.
Range模块
90% W3C标准 KindEditor.ready(function(K) { var range = K.range(document); range.selectNodeContents(element); range.insertNode(node); }); Reference: http://www.kindsoft.net/docs/range.html
30.
Command模块
对应execCommand KindEditor.ready(function(K) { var cmd = K.cmd(document); cmd.bold(); cmd.inserthtml(‘<div>text</div>’); }); Reference: http://www.kindsoft.net/docs/cmd.html
31.
单元测试
32.
QUnit http://localhost/kindeditor/test/cmd.html 每个模块有对应的单元测试
33.
加粗测试(1) 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>'); });
34.
自动化测试
35.
Selenium java -jar selenium-server-standalone-2.21.0.jar
36.
加粗测试(2) 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();
37.
KindEditor 缺点 • HTML解析基于正则 •
有些功能基于execCommand • 有些模块缺少单元测试
38.
谢谢
Jetzt herunterladen