夜宴50期《YUI3 editor》
-
Upload
koubei-banquet -
Category
Documents
-
view
332 -
download
2
Transcript of 夜宴50期《YUI3 editor》
![Page 1: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/1.jpg)
YUI3 Rich-Editor
2010-11-17 乌龙茶
![Page 2: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/2.jpg)
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
![Page 3: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/3.jpg)
Example
http://kxt.koubei.com/labs/wulong/editor_simple.html
![Page 4: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/4.jpg)
Over! Q&A?
![Page 5: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/5.jpg)
YUI2 Editor
![Page 6: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/6.jpg)
YUI3 Editor
![Page 7: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/7.jpg)
![Page 8: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/8.jpg)
Editor-base
• getContent
• getInstance
• getDomPath
• ……
![Page 9: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/9.jpg)
Editor-Core-plugin
• Selection.js
• exec-command.js
• Frame.js
![Page 10: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/10.jpg)
Create Rich-text Editor - Range
if( window.getSelection ){
return document.createRange(); //W3C
}else{
return document.selection.createRange(); //IE
}
![Page 11: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/11.jpg)
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();
}
![Page 12: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/12.jpg)
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
![Page 13: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/13.jpg)
Editor-mod-plugin
• List.js
• createLink.js
• tabs.js
• ……
![Page 14: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/14.jpg)
Create plugin - nodeChange
• changedEvent
• changedNode
• changedType
• Commands
• ……
![Page 15: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/15.jpg)
Example – ordered-list
if( e.changedType === 'enter' ) {
if ( e.changedNode.test('li , li *') ){
newLi = inst.Node.create('<li></li>');
}
}
![Page 16: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/16.jpg)
Create plugin - ExecCommand.COMMANDS
Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
insertorderedlist : function(){
……
……
}
});
editor.execCommand('insertorderedlist');
![Page 17: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/17.jpg)
Create plugin - Step
var DoSomething = { … };
Y.namespace('Plugin');
Y.Plugin. DoSomething = DoSomething ;
Y.mix( Y.Plugin.ExecCommand.COMMANDS, {
dosomething : function(){
DoSomething.do();
…..
}
});
![Page 18: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/18.jpg)
Use plugin
var editor = new Y.EditorBase();
editor.plug(Y.Plugin.DoSomething);
editor.execCommand(‘dosomething');
![Page 19: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/19.jpg)
Example
http://kxt.koubei.com/k2/editor/demo/editor.php
![Page 20: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/20.jpg)
![Page 21: 夜宴50期《YUI3 editor》](https://reader034.fdocuments.us/reader034/viewer/2022042516/559488b81a28ab177d8b4635/html5/thumbnails/21.jpg)
Q & A