Integration of ajax.org ace editor in XWiki.

https://github.com/ajaxorg/ace-builds

Loading from a wiki page

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

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") + "/ace.zip/ace.js",
    type: "text/javascript"
  });

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

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

Get Connected