Jerome Etienne.js Blog

Around JavaScript, node.js, WebGL and cool HTML5 game stuff

jquery.acewidget - a jQuery Plugin to Easily Embed Ace

AceWidget jQuery Plugin

jquery.acewidget.js is a jQuery plugin for acewidget. AceWidget is a widget which make ace /bespin trivial to embed in your pages. The Vision is to be super simple to embed and have no server to setup. It provides the whole official embeded api. The code is available on github under MIT license. That’s it. No fuss no muss.

Show dont tell, a demo of acewidget and a example of jquery.acewidget

How to use it

First you include the plugin itself in a usual script

<script type="text/javascript" src='jquery.acewidget.js'></script> 

Then create a DOM element which gonna contains ace widget, say a div

<div id="editor"></div>

Then you create the ace widget in this container by

var acewidget = jQuery('#editor').acewidget();

You wait until it is loaded in your DOM

acewidget.bind('load', function(){
    /* you start using it here */
})

After that you use it with the normal ace API

API

to set a new text

acewidget.setValue("foobar", function(){
alert("setValue "+result.status)
})

The callback is optional’ and notified when the action is completed. It is jsend compatible.

to get the current text

acewidget.getValue(function(result){
    alert("getValue "+result.status+" text:"+result.data.data)
})

to set the tab size

acewidget.setTabSize(8, function(result){
    alert("setTabSize "+result.status)
})

to be notified when the acewidget is loaded

acewidget.bind('load', function(){
    alert('acewidget is loaded')
})