Integration of ace editor in XWiki.

Loading from a wiki page

{{html wiki=false clean=false}}
<style type="text/css">
#aceDemo {
  position: relative;
  width: 500px;
  height: 400px;
  overflow: visible;
<div id="aceDemo">some text</div>
<script src="$xwiki.zipexplorer.getFileLink($xwiki.getDocument('XWiki.Ace'), '', 'ace.js')" type="text/javascript" charset="utf-8"></script>
    var editor = ace.edit("aceDemo");

Loading from a JSX

Alternatively, you can fire an Ace editor directly from a JSX. Note you will still need the minimal CSS required form the example above (for example in a SSX).

document.observe("dom:loaded", function(){
 var script = new Element("script", {
    src: new XWiki.Document("Ace", "XWiki").getURL("download") + "/",
    type: "text/javascript"

  script.addEventListener('load', function (e) {
   var editor = ace.edit("aceDemo");
   // Your code...
 }, false);

  $$("head")[0].insert({ bottom: script });
Created by jvelo on 2012/06/15 16:40

Get Connected