Your SlideShare is downloading. ×
0
YUI3 Rich-Editor    2010-11-17       乌龙茶
Create Rich-text Editor • Iframe. designMode = ‘on’ • otherElement. contentEditable = "true“ • execCommand       – Bold cr...
Examplehttp://kxt.koubei.com/labs/wulong/editor_simple.html
Over! Q&A?
YUI2 Editor
YUI3 Editor
Editor-base• getContent• getInstance• getDomPath• ……
Editor-Core-plugin• Selection.js• exec-command.js• Frame.js
Create Rich-text Editor - Rangeif( window.getSelection ){   return document.createRange(); //W3C}else{   return document.s...
Create Rich-text Editor - Rangeif (window.getSelection){//W3C     var range = document.createRange(),     selection = wind...
W3c range != ie range https://developer.mozilla.org/en/DOM/range http://kjah.javaeye.com/blog/420624 http://www.w3help.org...
Editor-mod-plugin• List.js• createLink.js• tabs.js• ……
Create plugin - nodeChange• changedEvent• changedNode• changedType• Commands• ……
Example – ordered-listif( e.changedType === enter ) {    if ( e.changedNode.test(li , li *) ){        newLi = inst.Node.cr...
Create plugin - ExecCommand.COMMANDSY.mix(Y.Plugin.ExecCommand.COMMANDS, {     insertorderedlist : function(){           …...
Create plugin - Stepvar DoSomething = { … };Y.namespace(Plugin);Y.Plugin. DoSomething = DoSomething ;Y.mix( Y.Plugin.ExecC...
Use pluginvar editor = new Y.EditorBase();editor.plug(Y.Plugin.DoSomething);editor.execCommand(‘dosomething);
Examplehttp://kxt.koubei.com/k2/editor/demo/editor.php
Q&A
Banquet 50
Banquet 50
Upcoming SlideShare
Loading in...5
×

Banquet 50

679

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
679
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Banquet 50"

  1. 1. YUI3 Rich-Editor 2010-11-17 乌龙茶
  2. 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 vendorIDhttps://developer.mozilla.org/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing
  3. 3. Examplehttp://kxt.koubei.com/labs/wulong/editor_simple.html
  4. 4. Over! Q&A?
  5. 5. YUI2 Editor
  6. 6. YUI3 Editor
  7. 7. Editor-base• getContent• getInstance• getDomPath• ……
  8. 8. Editor-Core-plugin• Selection.js• exec-command.js• Frame.js
  9. 9. Create Rich-text Editor - Rangeif( window.getSelection ){ return document.createRange(); //W3C}else{ return document.selection.createRange(); //IE}
  10. 10. Create Rich-text Editor - Rangeif (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(); }
  11. 11. 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
  12. 12. Editor-mod-plugin• List.js• createLink.js• tabs.js• ……
  13. 13. Create plugin - nodeChange• changedEvent• changedNode• changedType• Commands• ……
  14. 14. Example – ordered-listif( e.changedType === enter ) { if ( e.changedNode.test(li , li *) ){ newLi = inst.Node.create(<li></li>); }}
  15. 15. Create plugin - ExecCommand.COMMANDSY.mix(Y.Plugin.ExecCommand.COMMANDS, { insertorderedlist : function(){ …… …… }});editor.execCommand(insertorderedlist);
  16. 16. Create plugin - Stepvar DoSomething = { … };Y.namespace(Plugin);Y.Plugin. DoSomething = DoSomething ;Y.mix( Y.Plugin.ExecCommand.COMMANDS, { dosomething : function(){ DoSomething.do(); ….. }});
  17. 17. Use pluginvar editor = new Y.EditorBase();editor.plug(Y.Plugin.DoSomething);editor.execCommand(‘dosomething);
  18. 18. Examplehttp://kxt.koubei.com/k2/editor/demo/editor.php
  19. 19. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×