This document discusses how to create a rich text editor using YUI3. It provides examples of using designMode and contentEditable to enable rich text editing. It also covers using execCommand to implement common formatting commands like bold, italic, links. It discusses implementing ranges and selections cross-browser. The document outlines the plugin architecture in YUI3 Editor including nodeChange and execCommand plugins. It provides links to resources on ranges and an example rich text editor implementation.

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