编辑器设计kissy editor

of 41 /41
KISSY Editor 设计(2[email protected] [email protected],twitter [email protected]

Post on 12-Sep-2014

2.069 views

Category:

Technology


0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • KISSY Editor 2

    [email protected]

    [email protected]weibo,twitter

    [email protected]

  • 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