Submit Search
Upload
Kissy editor开发与设计
•
12 likes
•
2,233 views
yiming he
Follow
kissy editor dev and design
Read less
Read more
Technology
Report
Share
Report
Share
1 of 52
Recommended
05 MapKit and Text Input
05 MapKit and Text Input
Tom Fan
02 Objective-C
02 Objective-C
Tom Fan
合久必分,分久必合
合久必分,分久必合
Qiangning Hong
深入淺出 Web 容器 - Tomcat 原始碼分析
深入淺出 Web 容器 - Tomcat 原始碼分析
Justin Lin
Script with engine
Script with engine
Webrebuild
OpenEJB - 另一個選擇
OpenEJB - 另一個選擇
Justin Lin
ES5 introduction
ES5 introduction
otakustay
Java华为面试题
Java华为面试题
yiditushe
Recommended
05 MapKit and Text Input
05 MapKit and Text Input
Tom Fan
02 Objective-C
02 Objective-C
Tom Fan
合久必分,分久必合
合久必分,分久必合
Qiangning Hong
深入淺出 Web 容器 - Tomcat 原始碼分析
深入淺出 Web 容器 - Tomcat 原始碼分析
Justin Lin
Script with engine
Script with engine
Webrebuild
OpenEJB - 另一個選擇
OpenEJB - 另一個選擇
Justin Lin
ES5 introduction
ES5 introduction
otakustay
Java华为面试题
Java华为面试题
yiditushe
论 Python 与设计模式。
论 Python 与设计模式。
勇浩 赖
14 Saving Loading and Application States
14 Saving Loading and Application States
Tom Fan
页游开发中的 Python 组件与模式
页游开发中的 Python 组件与模式
勇浩 赖
J Query Learn
J Query Learn
guestfb42fc
Osgi Intro
Osgi Intro
Ching Yi Chan
JavaScript Advanced Skill
JavaScript Advanced Skill
firestoke
JCConf2015: groovy to gradle
JCConf2015: groovy to gradle
Ching Yi Chan
JavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization Skills
Ho Kim
Java Thread
Java Thread
艾鍗科技
I os 09
I os 09
信嘉 陳
Python 于 webgame 的应用
Python 于 webgame 的应用
勇浩 赖
Underscore
Underscore
cazhfe
A
A
guested19a2
16 CoreData
16 CoreData
Tom Fan
Uliweb框架思想与编程
Uliweb框架思想与编程
modou li
前端测试
前端测试
frontwindysky
Ejb工作原理学习笔记
Ejb工作原理学习笔记
yiditushe
JavaScript 教程
JavaScript 教程
Bobby Zhou
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
Berserk js
Berserk js
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
More Related Content
What's hot
论 Python 与设计模式。
论 Python 与设计模式。
勇浩 赖
14 Saving Loading and Application States
14 Saving Loading and Application States
Tom Fan
页游开发中的 Python 组件与模式
页游开发中的 Python 组件与模式
勇浩 赖
J Query Learn
J Query Learn
guestfb42fc
Osgi Intro
Osgi Intro
Ching Yi Chan
JavaScript Advanced Skill
JavaScript Advanced Skill
firestoke
JCConf2015: groovy to gradle
JCConf2015: groovy to gradle
Ching Yi Chan
JavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization Skills
Ho Kim
Java Thread
Java Thread
艾鍗科技
I os 09
I os 09
信嘉 陳
Python 于 webgame 的应用
Python 于 webgame 的应用
勇浩 赖
Underscore
Underscore
cazhfe
A
A
guested19a2
16 CoreData
16 CoreData
Tom Fan
Uliweb框架思想与编程
Uliweb框架思想与编程
modou li
前端测试
前端测试
frontwindysky
Ejb工作原理学习笔记
Ejb工作原理学习笔记
yiditushe
JavaScript 教程
JavaScript 教程
Bobby Zhou
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
What's hot
(19)
论 Python 与设计模式。
论 Python 与设计模式。
14 Saving Loading and Application States
14 Saving Loading and Application States
页游开发中的 Python 组件与模式
页游开发中的 Python 组件与模式
J Query Learn
J Query Learn
Osgi Intro
Osgi Intro
JavaScript Advanced Skill
JavaScript Advanced Skill
JCConf2015: groovy to gradle
JCConf2015: groovy to gradle
JavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization Skills
Java Thread
Java Thread
I os 09
I os 09
Python 于 webgame 的应用
Python 于 webgame 的应用
Underscore
Underscore
A
A
16 CoreData
16 CoreData
Uliweb框架思想与编程
Uliweb框架思想与编程
前端测试
前端测试
Ejb工作原理学习笔记
Ejb工作原理学习笔记
JavaScript 教程
JavaScript 教程
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Similar to Kissy editor开发与设计
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
Berserk js
Berserk js
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
Kindeditor设计思路v2
Kindeditor设计思路v2
luolonghao
Ecma script edition5-小试
Ecma script edition5-小试
lydiafly
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Will Huang
Kindeditor 设计思路
Kindeditor 设计思路
luolonghao
前端测试
前端测试
Zheng Biao
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
I os 16
I os 16
信嘉 陳
Er introduction
Er introduction
Yubei Li
Spring4.x + hibernate4.x_配置详解
Spring4.x + hibernate4.x_配置详解
zany_hui
Cfengine培训文档 刘天斯
Cfengine培训文档 刘天斯
liuts
Flex 4.5 action custom component development
Flex 4.5 action custom component development
jexchan
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
2023-netconf-deploy-azure-function-with-KEDA-on-aks
2023-netconf-deploy-azure-function-with-KEDA-on-aks
Roberson Liou
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
A
A
guested19a2
Similar to Kissy editor开发与设计
(20)
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
Berserk js
Berserk js
Kind editor设计思路
Kind editor设计思路
KISSY Editor Design 2
KISSY Editor Design 2
Kindeditor设计思路v2
Kindeditor设计思路v2
Ecma script edition5-小试
Ecma script edition5-小试
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
Kindeditor 设计思路
Kindeditor 设计思路
前端测试
前端测试
Spring 2.x 中文
Spring 2.x 中文
I os 16
I os 16
Er introduction
Er introduction
Spring4.x + hibernate4.x_配置详解
Spring4.x + hibernate4.x_配置详解
Cfengine培训文档 刘天斯
Cfengine培训文档 刘天斯
Flex 4.5 action custom component development
Flex 4.5 action custom component development
Javascript之昨是今非
Javascript之昨是今非
2023-netconf-deploy-azure-function-with-KEDA-on-aks
2023-netconf-deploy-azure-function-with-KEDA-on-aks
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
A
A
More from yiming he
kissy 1.5 progress
kissy 1.5 progress
yiming he
kissy at alibaba
kissy at alibaba
yiming he
kissy modularization part2
kissy modularization part2
yiming he
kissy modularization part1
kissy modularization part1
yiming he
KISSY @ 2013-2
KISSY @ 2013-2
yiming he
KISSY 1.4.0 released
KISSY 1.4.0 released
yiming he
callSuper in kissy
callSuper in kissy
yiming he
KISSY XTemplate
KISSY XTemplate
yiming he
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
yiming he
Kissy component system
Kissy component system
yiming he
KISSY@2013.05
KISSY@2013.05
yiming he
kissy@2013.03
kissy@2013.03
yiming he
kissy@2013
kissy@2013
yiming he
KISSY 1.3-released
KISSY 1.3-released
yiming he
Simple kissy1.3
Simple kissy1.3
yiming he
Hujs 总结
Hujs 总结
yiming he
Kissy in-progress
Kissy in-progress
yiming he
Kissy dpl-practice
Kissy dpl-practice
yiming he
编辑器设计2
编辑器设计2
yiming he
KISSY Component API Design
KISSY Component API Design
yiming he
More from yiming he
(20)
kissy 1.5 progress
kissy 1.5 progress
kissy at alibaba
kissy at alibaba
kissy modularization part2
kissy modularization part2
kissy modularization part1
kissy modularization part1
KISSY @ 2013-2
KISSY @ 2013-2
KISSY 1.4.0 released
KISSY 1.4.0 released
callSuper in kissy
callSuper in kissy
KISSY XTemplate
KISSY XTemplate
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
Kissy component system
Kissy component system
KISSY@2013.05
KISSY@2013.05
kissy@2013.03
kissy@2013.03
kissy@2013
kissy@2013
KISSY 1.3-released
KISSY 1.3-released
Simple kissy1.3
Simple kissy1.3
Hujs 总结
Hujs 总结
Kissy in-progress
Kissy in-progress
Kissy dpl-practice
Kissy dpl-practice
编辑器设计2
编辑器设计2
KISSY Component API Design
KISSY Component API Design
Kissy editor开发与设计
1.
Kissy editor 介绍
何一鸣(承玉@taobao)
2.
About me 2003
- 2010 Fudan CS 2010.07 - F2E @ Taobao 目前开发维护 kissy editor
3.
大纲
1. 编辑器的分类 2. 编辑器的实现 3. KISSY Editor的设计 4. 打包与部署 5. 总结与前景展望
4.
1. 编辑器的分类
5.
1.1 所想即所得
6.
1.2 所见即所得
7.
Web 可视化编辑器
8.
2. 编辑器的实现
创建 iframe 元素,设置 body 属性 contenteditable为 true 方法 ◦ 调用 execCommand ◦ Range 自主实现 实现注意
9.
2.1 调用 execCommand
ie 4.0 引入 bSuccess = object.execCommand(sCommand[,bUserInterface][,vValue]) ◦ sCommand : 命令名 ◦ bUserInterface : 用户界面提示 ◦ vValue : 命令参数
10.
execCommand 例子
加粗当前选择文字 ◦ document.execCommand("bold",null,false); 添加链接 ◦ 直接添加 document.execCommand("createlink", null,"http://www.g.cn"); ◦ 弹窗提示用户输入 document.execCommand("createlink", true);
11.
execCommand 问题 ◦
代码生成不一致 行内格式化 ie 会生成 font 标签 <font color=“#ff0000”>x</font> safari 生成私有 class <span class=“Apple-style-span” style=“font-weight:bold;”>x</span> ◦ 能力不一致 Createlink Firefox 不支持用户界面提示 自己 window.prompt
12.
execCommand 兼容性
13.
execCommand
14.
2.2 Range 自主实现
使用 range 实现 execCommand 对等 功能。 ◦ Range api (w3c , ie)
15.
W3c Range
用来获取光标或选择区域信息 W3c api Interface Range { ◦ Node startContainer ◦ Long startOffset ◦ Node endContainer ◦ Long endOffset }
16.
IE Range
ControlRange ◦ 选取整个元素 (div,img,object) ◦ Item (index) : 获取选中元素节点 TextRange ◦ 获取选中的文本区域 ◦ Text : 选中的文本串值 ◦ parentElement() : ◦ compareEndPoints() ◦ moveToElementText()
17.
Do not hurt
web
18.
实现 execCommand
Range + Dom2 + Dtd = execCommand
19.
Dtd 的作用
标签格式化系统需要考虑标签嵌套规则 根据 dtd 以及格式标签进行 Range 的 拆分!
20.
Dtd 例子
加粗 ◦ ^<p>line</p><p>line2</p>^ ◦ 错误: <strong><p>line</p><p>line2</p> </strong> ◦ 正确: <p><strong>line<strong></p> <p><strong>line2</strong></p>
21.
2.3 常见问题
换行代码生成差异 ie 选择区域丢失问题 Firefox 不可编辑问题 光标定位问题…..
22.
Enter 换行差异 ◦
<h1>bla bla^</h1> 末尾换行 ie <h1>bla bla</h1> <p>|</p> Safari <h1>bla bla</h1> <h1>|</h1> Firefox <h1>bla bla</h1> |<br><br>
23.
ie 选择区域丢失
ie 编辑器内 iframe文档失去焦点后, 其选择区域/光标位置也随之丢失 。 解决: ◦ 随时存储当前 range ◦ 即将获取焦点前(focusin)立即恢复 range
24.
Firefox 不可编辑问题
Firefox 编辑器内 iframe 移动后(最 大化),不可再编辑。 解决: ◦ 重置 contenteditable 属性
25.
3. KISSY Editor
的设计 3.1 功能简介与 demo 演示 3.2 总体架构 3.3 插件机制 3.4 动态加载机制 3.5 定制插件开发 3.6 设计模式的应用
26.
3.1 功能介绍
27.
功能介绍
28.
3.2 总体架构
Custom plugins Core plugins Editor core Kissy core
29.
架构介绍
30.
3.3 插件机制
editor.addCommand(“image”,imageSupportObj);
31.
插件实现分离机制
插件的功能定义在 KISSY.Editor ◦ 插件功能类: KISSY.Editor.ColorDef.prototype.do=function(){} ◦ UI插件类 KISSY.Editor.Overlay=function(){ }
32.
插件的实例应用
插件最终要使用在实例上 ◦ KISSY.Editor.use(“colordef”,function(){ editor.addButton({ click:function(){ colorInstance.do(); } }); ◦ }); 实例的use即是应用插件的过程 ◦ editor.use(“color”);
33.
3.4 动态加载机制
1. 插件窗口按需动态加载 2.配置插件间的依赖关系图插件按需动 态加载
34.
3.5 定制插件开发
35.
定制插件开发例子
Sourcearea 与 bangpai-sourcearea 调用execCommand editor.execCommand(“modeChange” ,”source”);
36.
3.6 设计模式应用
Do not repeat yourself ! scalability
37.
Template method
Flash +gen() +getUrl() : string +getDemision() : object music +getUrl() : string +getDemision() : object
38.
Visitor / filter
HtmlParser +parse(in html : string, in fragment : object) Fragment +onNode(in node : object) +onElement(in el : object) +onAttribute(in attr : object)
39.
Observer-listener
最常见 Editor -subject -selectionChangeHanlders : object +on(in selectionChangeHanlder : object) 1 +fire(in selectionChangeEvent : object) * -observer SelectionChangeHanlder +onSelectionChange(in selectionChangeEvent : object) Plugin +onSelectionChange(in selectionChangeEvent : object)
40.
Command
Editor +addCommand(in cmd : string, in func : object) +execCommand(in cmd : string) 复杂的操作用命令封装 editor.addCommand(“align”,alignCmdObj); editor.execCommand(“align”,”left”);
41.
4. 打包与部署
4.1 源码概况 4.2 使用工具 4.3 最终部署
42.
4.1 源码概况
结构
43.
4.2 使用工具
Ant 粘合剂
44.
4.3 部署
静态引入
45.
4.3 部署
动态引入(combo加载) ◦ Kissy-seed.js KISSY.use(“editor”,function(S) { S.Editor(“#e”).use(“font,image,music”); }); Cdn combo 两阶段 http://a.tbcdn.cn/??kissy-core.js,editor/editor-core.js http://a.tbcdn.cn/?? editor/plugins/font/plugin.js,editor/plugins/image/plugin.js
46.
5.总结
1. 再次回顾 2. 与其他编辑器的比较 3. 前景与展望
47.
回顾
48.
其他编辑器
站在巨人肩上 ◦ ckeditor , tinymce,google doc
49.
前景与展望
1. 更少代码完成80%的功能 2. 触摸事件支持,加强Mobile设备 3. Html5 代码生成,使用 video , audio . 生成 header , nav , section , 加强标签语义 .
50.
感谢
Kissy editor 1.0 :玉伯 视觉: 书安倾情奉献 产品经理:向秋 测试:小菊,南玲,周坤,黛霁
51.
特别感谢
52.
FAQ Email:yiminghe@gmail.com Blog:
http://yiminghe.javaeye.com