AceWidget

AceWidget is a widget which make ace/besping trivial to embed in your pages. The Vision is to be super simple to embed and have no server to setup. It provide the whole official embeded api. The code is available on github under MIT license and has been written by Jerome Etienne. That's it. No fuss no muss.

Demo

show, dont tell, here is a demo.

How to embed it

You add the following in your own page. and that it

<iframe src="http://jeromeetienne.github.com/acewidget/iframe.html"></iframe>

You can add constructor parameters the url. For example

http://jeromeetienne.github.com/acewidget/iframe.html?theme=twilight&mode=javascript

Constructor parameters

theme To set the theme of the editor

mode To set the mode of the editor

API

The api calls are done via the usual window.postMessage() to send message to the acewidget

Events sent to the widget

It is jsend compatible.

userdata

It is possible to pass private data to the sent event. They will be treated as opaque data by the widget. The widget will include it in its reply. The field name is 'userdata'

setTheme

setTheme: To change current theme to twilight

{
    type    : "setTheme",
    data    : {
        theme   : "twilight"
    }
}

setMode

setMode: To change current mode to javascript

{
    type    : "setMode",
    data    : {
        mode    : "javascript"
    }
}

setValue

setValue: To change current text content

{
    type    : "setValue",
    data    : {
        text    : "supernewtext"
    }
}

getValue

getValue: get the current text content

{
    type    : "getValue",
    userdata: "foobar"
}

It will returns

{
    status  : "succeed",
    data    : {
        data    : "super text content from widget",
        userdata: "foobar"
    }
}

gotoLine

gotoLine: To change the current line to 42

{
    type    : "setValue",
    data    : {
        line    : 42
    }
}

setTabSize

setTabSize: To change the current tabsize to 8

{
    type    : "setTabSize",
    data    : {
        size    : 8
    }
}