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

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

21. Q&A