Banquet 50
Upcoming SlideShare
Loading in...5
×
 

Banquet 50

on

  • 844 views

 

Statistics

Views

Total Views
844
Views on SlideShare
844
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Banquet 50 Banquet 50 Presentation Transcript

  • YUI3 Rich-Editor 2010-11-17 乌龙茶
  • 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
  • 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.selection.createRange(); //IE}
  • 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(); }
  • 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
  • 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.create(<li></li>); }}
  • Create plugin - ExecCommand.COMMANDSY.mix(Y.Plugin.ExecCommand.COMMANDS, { insertorderedlist : function(){ …… …… }});editor.execCommand(insertorderedlist);
  • Create plugin - Stepvar DoSomething = { … };Y.namespace(Plugin);Y.Plugin. DoSomething = DoSomething ;Y.mix( Y.Plugin.ExecCommand.COMMANDS, { dosomething : function(){ DoSomething.do(); ….. }});
  • 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