kissy editor design 2
Post on 12-Sep-2014
1.394 views
Embed Size (px)
DESCRIPTION
KISSY Editor Design 2 For D2 2012TRANSCRIPT
-
KISSY Editor 2
[email protected],twitter
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
-
API
-
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
});});
-
combo
-
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