Enviar búsqueda
Cargar
夜宴50期《YUI3 editor》
•
0 recomendaciones
•
186 vistas
Koubei Banquet
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 21
Descargar ahora
Descargar para leer sin conexión
Recomendados
Banquet 50
Banquet 50
Koubei UED
Extending Studio
Extending Studio
Piotr Nalepa
ASP.NET Web API O to 100
ASP.NET Web API O to 100
Himanshu Desai
PowerShell Script to add multiple users to a group in AD
PowerShell Script to add multiple users to a group in AD
Joseph Daramola
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Eyal Vardi
The MEAN stack
The MEAN stack
Nattaya Mairittha
The Road to Native Web Components
The Road to Native Web Components
Mike North
Dynamic SQL in doobie
Dynamic SQL in doobie
chibochibo
Recomendados
Banquet 50
Banquet 50
Koubei UED
Extending Studio
Extending Studio
Piotr Nalepa
ASP.NET Web API O to 100
ASP.NET Web API O to 100
Himanshu Desai
PowerShell Script to add multiple users to a group in AD
PowerShell Script to add multiple users to a group in AD
Joseph Daramola
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Eyal Vardi
The MEAN stack
The MEAN stack
Nattaya Mairittha
The Road to Native Web Components
The Road to Native Web Components
Mike North
Dynamic SQL in doobie
Dynamic SQL in doobie
chibochibo
夜宴43期《Auto Tools》
夜宴43期《Auto Tools》
Koubei Banquet
夜宴54期《我的关注》
夜宴54期《我的关注》
Koubei Banquet
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》
Koubei Banquet
Banquet 27
Banquet 27
Koubei Banquet
夜宴25期《Web的未来》
夜宴25期《Web的未来》
Koubei Banquet
夜宴39期《Seven》
夜宴39期《Seven》
Koubei Banquet
夜宴11期《开源》
夜宴11期《开源》
Koubei Banquet
夜宴9期《CPU & Intel》
夜宴9期《CPU & Intel》
Koubei Banquet
夜宴16期《变化ing》
夜宴16期《变化ing》
Koubei Banquet
夜宴21期《Adobe CS5 & Color》
夜宴21期《Adobe CS5 & Color》
Koubei Banquet
夜宴26期《Mobile Web测试》
夜宴26期《Mobile Web测试》
Koubei Banquet
夜宴31期《浏览器》
夜宴31期《浏览器》
Koubei Banquet
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
Koubei Banquet
夜宴8期《Dive into Mozilla Labs》
夜宴8期《Dive into Mozilla Labs》
Koubei Banquet
夜宴37期《专利》
夜宴37期《专利》
Koubei Banquet
Ihya v4
Ihya v4
Just Helping
夜宴51期《Nothing but the web》
夜宴51期《Nothing but the web》
Koubei Banquet
夜宴41期《新事》
夜宴41期《新事》
Koubei Banquet
夜宴36期《技术前哨站》
夜宴36期《技术前哨站》
Koubei Banquet
An introduction to islamic finance
An introduction to islamic finance
Just Helping
Lightweight Xtext Editors as SWT Widgets
Lightweight Xtext Editors as SWT Widgets
meysholdt
How to create an Angular builder
How to create an Angular builder
Maurizio Vitale
Más contenido relacionado
Destacado
夜宴43期《Auto Tools》
夜宴43期《Auto Tools》
Koubei Banquet
夜宴54期《我的关注》
夜宴54期《我的关注》
Koubei Banquet
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》
Koubei Banquet
Banquet 27
Banquet 27
Koubei Banquet
夜宴25期《Web的未来》
夜宴25期《Web的未来》
Koubei Banquet
夜宴39期《Seven》
夜宴39期《Seven》
Koubei Banquet
夜宴11期《开源》
夜宴11期《开源》
Koubei Banquet
夜宴9期《CPU & Intel》
夜宴9期《CPU & Intel》
Koubei Banquet
夜宴16期《变化ing》
夜宴16期《变化ing》
Koubei Banquet
夜宴21期《Adobe CS5 & Color》
夜宴21期《Adobe CS5 & Color》
Koubei Banquet
夜宴26期《Mobile Web测试》
夜宴26期《Mobile Web测试》
Koubei Banquet
夜宴31期《浏览器》
夜宴31期《浏览器》
Koubei Banquet
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
Koubei Banquet
夜宴8期《Dive into Mozilla Labs》
夜宴8期《Dive into Mozilla Labs》
Koubei Banquet
夜宴37期《专利》
夜宴37期《专利》
Koubei Banquet
Ihya v4
Ihya v4
Just Helping
夜宴51期《Nothing but the web》
夜宴51期《Nothing but the web》
Koubei Banquet
夜宴41期《新事》
夜宴41期《新事》
Koubei Banquet
夜宴36期《技术前哨站》
夜宴36期《技术前哨站》
Koubei Banquet
An introduction to islamic finance
An introduction to islamic finance
Just Helping
Destacado
(20)
夜宴43期《Auto Tools》
夜宴43期《Auto Tools》
夜宴54期《我的关注》
夜宴54期《我的关注》
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》
Banquet 27
Banquet 27
夜宴25期《Web的未来》
夜宴25期《Web的未来》
夜宴39期《Seven》
夜宴39期《Seven》
夜宴11期《开源》
夜宴11期《开源》
夜宴9期《CPU & Intel》
夜宴9期《CPU & Intel》
夜宴16期《变化ing》
夜宴16期《变化ing》
夜宴21期《Adobe CS5 & Color》
夜宴21期《Adobe CS5 & Color》
夜宴26期《Mobile Web测试》
夜宴26期《Mobile Web测试》
夜宴31期《浏览器》
夜宴31期《浏览器》
夜宴52期《从函数构造到YUI沙箱》
夜宴52期《从函数构造到YUI沙箱》
夜宴8期《Dive into Mozilla Labs》
夜宴8期《Dive into Mozilla Labs》
夜宴37期《专利》
夜宴37期《专利》
Ihya v4
Ihya v4
夜宴51期《Nothing but the web》
夜宴51期《Nothing but the web》
夜宴41期《新事》
夜宴41期《新事》
夜宴36期《技术前哨站》
夜宴36期《技术前哨站》
An introduction to islamic finance
An introduction to islamic finance
Similar a 夜宴50期《YUI3 editor》
Lightweight Xtext Editors as SWT Widgets
Lightweight Xtext Editors as SWT Widgets
meysholdt
How to create an Angular builder
How to create an Angular builder
Maurizio Vitale
Web Components v1
Web Components v1
Mike Wilcox
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
Intorduction of Playframework
Intorduction of Playframework
maltiyadav
Dev Jumpstart: Build Your First App with MongoDB
Dev Jumpstart: Build Your First App with MongoDB
MongoDB
J query module1
J query module1
Srivatsan Krishnamachari
Web Components With Rails
Web Components With Rails
Boris Nadion
Make JSF more type-safe with CDI and MyFaces CODI
Make JSF more type-safe with CDI and MyFaces CODI
os890
Creation&imitation
Creation&imitation
Tae Young Lee
GDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App Engine
Yared Ayalew
Javascript first-class citizenery
Javascript first-class citizenery
toddbr
jQuery Fundamentals
jQuery Fundamentals
Gil Fink
Wt unit 5
Wt unit 5
team11vgnt
Jquery dojo slides
Jquery dojo slides
helenmga
Real World Asp.Net WebApi Applications
Real World Asp.Net WebApi Applications
Effie Arditi
Introduction to Django
Introduction to Django
Jagdeep Singh Malhi
CUST-1 Share Document Library Extension Points
CUST-1 Share Document Library Extension Points
Alfresco Software
Introduction to Django
Introduction to Django
Joaquim Rocha
dotNet Miami - June 21, 2012: Richie Rump: Entity Framework: Code First and M...
dotNet Miami - June 21, 2012: Richie Rump: Entity Framework: Code First and M...
dotNet Miami
Similar a 夜宴50期《YUI3 editor》
(20)
Lightweight Xtext Editors as SWT Widgets
Lightweight Xtext Editors as SWT Widgets
How to create an Angular builder
How to create an Angular builder
Web Components v1
Web Components v1
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Intorduction of Playframework
Intorduction of Playframework
Dev Jumpstart: Build Your First App with MongoDB
Dev Jumpstart: Build Your First App with MongoDB
J query module1
J query module1
Web Components With Rails
Web Components With Rails
Make JSF more type-safe with CDI and MyFaces CODI
Make JSF more type-safe with CDI and MyFaces CODI
Creation&imitation
Creation&imitation
GDG Addis - An Introduction to Django and App Engine
GDG Addis - An Introduction to Django and App Engine
Javascript first-class citizenery
Javascript first-class citizenery
jQuery Fundamentals
jQuery Fundamentals
Wt unit 5
Wt unit 5
Jquery dojo slides
Jquery dojo slides
Real World Asp.Net WebApi Applications
Real World Asp.Net WebApi Applications
Introduction to Django
Introduction to Django
CUST-1 Share Document Library Extension Points
CUST-1 Share Document Library Extension Points
Introduction to Django
Introduction to Django
dotNet Miami - June 21, 2012: Richie Rump: Entity Framework: Code First and M...
dotNet Miami - June 21, 2012: Richie Rump: Entity Framework: Code First and M...
Más de Koubei Banquet
夜宴2期《ActionScript与JavaScript》
夜宴2期《ActionScript与JavaScript》
Koubei Banquet
夜宴53期《Tail of 2010 》
夜宴53期《Tail of 2010 》
Koubei Banquet
夜宴49期《YUI Conf 2010》
夜宴49期《YUI Conf 2010》
Koubei Banquet
夜宴48期《一场关于YUI3/jQuery的精彩辩论》
夜宴48期《一场关于YUI3/jQuery的精彩辩论》
Koubei Banquet
夜宴47期《一个艰难的决定》
夜宴47期《一个艰难的决定》
Koubei Banquet
夜宴45期《Sociability is complex》
夜宴45期《Sociability is complex》
Koubei Banquet
夜宴44期《我们蛋疼的年代——安全篇》
夜宴44期《我们蛋疼的年代——安全篇》
Koubei Banquet
夜宴42期《Gadgets》
夜宴42期《Gadgets》
Koubei Banquet
夜宴40期《表单-反馈-体验》
夜宴40期《表单-反馈-体验》
Koubei Banquet
夜宴38期《侵权 & 山寨》
夜宴38期《侵权 & 山寨》
Koubei Banquet
夜宴35期《质量?》
夜宴35期《质量?》
Koubei Banquet
夜宴33期《未来是湿的》
夜宴33期《未来是湿的》
Koubei Banquet
夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》
Koubei Banquet
夜宴29期《难兄难弟》
夜宴29期《难兄难弟》
Koubei Banquet
夜宴28期《Revolution》
夜宴28期《Revolution》
Koubei Banquet
夜宴24期《这段时间》
夜宴24期《这段时间》
Koubei Banquet
夜宴20期《Google退出“中国”?》
夜宴20期《Google退出“中国”?》
Koubei Banquet
夜宴19期《没有永远的朋友》
夜宴19期《没有永远的朋友》
Koubei Banquet
Más de Koubei Banquet
(18)
夜宴2期《ActionScript与JavaScript》
夜宴2期《ActionScript与JavaScript》
夜宴53期《Tail of 2010 》
夜宴53期《Tail of 2010 》
夜宴49期《YUI Conf 2010》
夜宴49期《YUI Conf 2010》
夜宴48期《一场关于YUI3/jQuery的精彩辩论》
夜宴48期《一场关于YUI3/jQuery的精彩辩论》
夜宴47期《一个艰难的决定》
夜宴47期《一个艰难的决定》
夜宴45期《Sociability is complex》
夜宴45期《Sociability is complex》
夜宴44期《我们蛋疼的年代——安全篇》
夜宴44期《我们蛋疼的年代——安全篇》
夜宴42期《Gadgets》
夜宴42期《Gadgets》
夜宴40期《表单-反馈-体验》
夜宴40期《表单-反馈-体验》
夜宴38期《侵权 & 山寨》
夜宴38期《侵权 & 山寨》
夜宴35期《质量?》
夜宴35期《质量?》
夜宴33期《未来是湿的》
夜宴33期《未来是湿的》
夜宴32期《WordPress and so on》
夜宴32期《WordPress and so on》
夜宴29期《难兄难弟》
夜宴29期《难兄难弟》
夜宴28期《Revolution》
夜宴28期《Revolution》
夜宴24期《这段时间》
夜宴24期《这段时间》
夜宴20期《Google退出“中国”?》
夜宴20期《Google退出“中国”?》
夜宴19期《没有永远的朋友》
夜宴19期《没有永远的朋友》
夜宴50期《YUI3 editor》
1.
YUI3 Rich-Editor
2010-11-17 乌龙茶
2.
Create Rich-text Editor
• Iframe. designMode = ‘on’ • otherElement. contentEditable = "true“ • execCommand – Bold createLink delete formatBlock forwardDelete insertImage insertHTML insertLineBreak insertOrderedList insertOrderedList insertParagraph insertText italic redo selectAll subscript superscript undo unlink unselect vendorID https://developer.mozilla.org/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing
3.
Example http://kxt.koubei.com/labs/wulong/editor_simple.html
4.
Over! Q&A?
5.
YUI2 Editor
6.
YUI3 Editor
7.
8.
Editor-base • getContent • getInstance •
getDomPath • ……
9.
Editor-Core-plugin • Selection.js • exec-command.js •
Frame.js
10.
Create Rich-text Editor
- Range if( window.getSelection ){ return document.createRange(); //W3C }else{ return document.selection.createRange(); //IE }
11.
Create Rich-text Editor
- Range if (window.getSelection){//W3C var range = document.createRange(), selection = window.getSelection(); range.setStart(selection.anchorNode, selection.anchorOffset); range.setEnd(selection.focusNode, selection.focusOffset); return range; }else { //IE return document.selection.createRange(); }
12.
W3c range !=
ie range https://developer.mozilla.org/en/DOM/range http://kjah.javaeye.com/blog/420624 http://www.w3help.org/zh-cn/causes/SD9031
13.
Editor-mod-plugin • List.js • createLink.js •
tabs.js • ……
14.
Create plugin -
nodeChange • changedEvent • changedNode • changedType • Commands • ……
15.
Example – ordered-list if(
e.changedType === 'enter' ) { if ( e.changedNode.test('li , li *') ){ newLi = inst.Node.create('<li></li>'); } }
16.
Create plugin -
ExecCommand.COMMANDS Y.mix(Y.Plugin.ExecCommand.COMMANDS, { insertorderedlist : function(){ …… …… } }); editor.execCommand('insertorderedlist');
17.
Create plugin -
Step var DoSomething = { … }; Y.namespace('Plugin'); Y.Plugin. DoSomething = DoSomething ; Y.mix( Y.Plugin.ExecCommand.COMMANDS, { dosomething : function(){ DoSomething.do(); ….. } });
18.
Use plugin var editor
= new Y.EditorBase(); editor.plug(Y.Plugin.DoSomething); editor.execCommand(‘dosomething');
19.
Example http://kxt.koubei.com/k2/editor/demo/editor.php
20.
21.
Q&A
Descargar ahora