kissy editor design 2

KISSY Editor 2

[email protected]

[email protected],twitter

[email protected]

2012.06.25 Draft

1. KISSY Editor

2.

3. KISSY Editor 3.1 API

3.2

3.4

KISSY Editor ?

KISSY Editor

UI KISSY

CKEditor

///.

KISSY Editor

KISSY Editor

Toggle Button

Select

KISSY Editor

Overlay

ContextMenu

KISSY Editor

Bubble

contentEditable

designMode

Iframe.contentWindow.document.body.conten

tEditable = true

http://www.w3.org/TR/html5/editing.html#attr-contenteditable

document.execCommand

Range/Selection

IE (

Range/Selection

W3c

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

Selection

rangeCount/getRangeAt/addRange/removeRange

Range

startContainer/startOffset/endContainer/endOffset

javascript http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html

Body

P

12

P

34

p

56 strong

7

89

api

xhtml DTDBody

P

1 strong

2

P

strong

34

p

strong

5678

9

api h1

p

123 strong

456

789

api h1

h1

123 strong

456

789

Copy/paste

Word

Html parser

123456789

123456789123456789

P / Br ?

table

tr

td

123456

IE/firefox/chrome

IE

KISSY Editor

API

KISSY Editor

KISSY

KISSY UI

KISSY Component

KISSY Editor

KISSY.use(editor, function (S,Editor){

S.use(plugin1,plugin2, function (S,P1,P2){

new Editor({

//

plugins:[

new P1({}), P2

]

});});});

combine use editor/full

width/height

focused

prefixCls

UI

xclass

new Overlay({

children:[{

xclass: editor,

width:500,

height:500

}]

});

srcNode

render

listeners

plugins

new Editor({

listeners:{

focus: function(){}

}}).render;

customStyle

customLink

attachForm

form submit

addButton

addSelect select

insertHtml

html

execCommand

KISSY Loader

dom event node ua base

component

Html

Parser

&

xhtml

dtd

range selection

button select menu Edit API

Editor & plugins

overlay

KISSY.add("editor/range",function(S,DOM){

},{

requires:['dom']

});

KISSY.use

KISSY.add("editor/plugin/image",function(S,DOM){

xx.on("click",function(){

S.use("editor/plugin/image/dialog");

});

});

combo

KISSY.use("editor",function(){

KISSY.use("editor/plugin/fontSize/,editor/plugin

/fontFamily/",

function(){

// use plugins

});});

Aria in KISSY UI

Tab

Aria

createDOM renderUI bindUI syncUI

KISSY.add("editor/plugin/bold/index",function(){

function FontSize(cfg){this.cfg=cfg;}

FontSize.prototype={

renderUI:function(editor){

editor.addButton(...);

}

};

return FontSize;

});

editor.fire("selectionChange

");

editor.on("selectionChange",

function(){

});

editor

plugin2

Plugin1plugin3

document.execCommand

editor.execCommand

editor

fontSize

fontFamily

bold

editor.execCommand("fontSize","1

8px");

editor.execCommand("fontFamily",

"kaiti");

editor.execCommand("bold",true);

jasmine

describe("cloneContents", function () {

it(works for simple text node, function () {

var range = new Range(document);

range.setStart(text, 2);

range.setEnd(text, 5);

var f = range.cloneContents();

var newDiv = KISSY.all("").appendTo("body");

newDiv.append(f);

expect(myHtml(newDiv)).toBe("345");

});

});

// combo

KISSY.config("combine",true);

// editor /

KISSY.use("editor",function(S,Editor){

// editor

S.use("editor/plugin1,editor/plugin2...",

function(S,Plugin1,Plugin2){});

});

new Editor({

width:,

height:,

srcNode:'#editor',

plugins:[

new Plugin1({..}),

Plugin2

]

});

new Editor({

width:,

height:,

render:'#editorContainer',

plugins:[

new Plugin1({..}),

Plugin2

]

});

editor.addButton

editor.addSelect

editor.execCommand

editor.insertHtml

KISSY Editor

KISSY Editor

I18n

Theme

KISSY UI