Ace Editor
Last modified by Michael Sibayan on 2022/05/03 16:48
- Manage
-
Copy
- Actions
-
Export
-
Annotate
-
Print Preview
- Viewers
-
Source
-
Siblings
-
Attachments (1)
-
History
-
Likes
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}}
{{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 });
});
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 });
});
0
