banquet 50

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