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 vendorID
https://developer.mozilla.org/en/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing
Example
http://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 - Range
if( window.getSelection ){
return document.createRange(); //W3C
}else{
return document.selection.createRange(); //IE
}
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();
}
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-list
if( e.changedType === 'enter' ) {
if ( e.changedNode.test('li , li *') ){
newLi = inst.Node.create('<li></li>');
}
}
Create plugin - ExecCommand.COMMANDS
Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
insertorderedlist : function(){
……
……
}
});
editor.execCommand('insertorderedlist');
Create plugin - Step
var DoSomething = { … };
Y.namespace('Plugin');
Y.Plugin. DoSomething = DoSomething ;
Y.mix( Y.Plugin.ExecCommand.COMMANDS, {
dosomething : function(){
DoSomething.do();
…..
}
});
Use plugin
var editor = new Y.EditorBase();
editor.plug(Y.Plugin.DoSomething);
editor.execCommand(‘dosomething');
Example
http://kxt.koubei.com/k2/editor/demo/editor.php
Q & A
top related