Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

a widget which make ace trivial to embed in your pages

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 ace
Octocat-spinner-32 contrib
Octocat-spinner-32 images
Octocat-spinner-32 js
Octocat-spinner-32 MIT-LICENSE.txt
Octocat-spinner-32 Makefile
Octocat-spinner-32 README.md
Octocat-spinner-32 demo.html
Octocat-spinner-32 devel.html
Octocat-spinner-32 iframe.html
Octocat-spinner-32 index.html
README.md

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.

AceWidget 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
    }
}
Something went wrong with that request. Please try again.