Más contenido relacionado
La actualidad más candente (17)
Similar a Banquet 50 (20)
Banquet 50
- 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
- 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
- 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');