kissy editor design 2

Click here to load reader

Post on 12-Sep-2014

1.393 views

Category:

Technology

7 download

Embed Size (px)

DESCRIPTION

KISSY Editor Design 2 For D2 2012

TRANSCRIPT

  • 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

  • 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