KISSY Editor 2

yiminghe@gmail.com

kissyteam@weibo,twitter

yiminghe@twitter

KISSY Editor

KISSY Editor ?

http://docs.kissyui.com/docs/html/api/component/editor/

KISSY Editor

UI KISSY

CKEditor

///.

KISSY Editor

KISSY Loader

dom event node ua base

component

HtmlParser

&xhtmldtd

range selection

button select menu Edit API

Editor & plugins

overlay

KISSY

KISSY.add

KISSY.use

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

function Range(){}

// todo

return Range;

},{

requires:['dom']

});

+ combo

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

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

editor/plugin/fontFamily/",

function(){

// use plugins

}

);

});

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

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

});

KISSY

KISSY Component

KISSY Editor

width/height

listeners

srcNode

render

customStyle

customLink

data

KISSY

KISSY Component

KISSY Editor

-

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;

});

KISSY

KISSY Component

KISSY Editor

editor

plugin2

Plugin1plugin3

KISSY

KISSY UI

KISSY Component

KISSY Editor

document.execCommand

editor.execCommand

editor

fontSize

fontFamily

bold

KISSY UI

Aria in KISSYTab

Aria

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");

});

});

document.execComand

range/selection

IE

Control range

Text range

W3C

Range

paste

123

456

789

123456789

Html parse

style=margin:0 pt

class=msoNormal

lang=en-us

face=calibre

123

style=mso-bidi-font-weight:

normal;

456

789

face=""

Filter margin 0

style

font

span(inline)

mso

IE

..

table

tr

td

123456

KISSY Editor

I18n

theme

KISSY UI

Refer

http://docs.kissyui.com

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

http://msdn.microsoft.com/en-us/library/ie/ms535869(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/ie/ms535872(v=vs.85).aspx

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

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

http://en.wikipedia.org/wiki/Interceptor_pattern