Banquet 50
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
870
On Slideshare
870
From Embeds
0
Number of Embeds
0

Actions

Shares
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