Your SlideShare is downloading. ×
0
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Banquet 50
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Banquet 50

666

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×