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