This is how I implemented it.
Get all the files within:
https://github.com/ajaxorg/ace-builds/tree/master/src-noconflict
and place in a folder on your server at static/js/ace
.
Depending on whether you are displaying Javascript or HMTL in the Ace editor, you Ace code will be something like:
For HTML
var html_editor = ace.edit("my_html");
html_editor.setTheme("ace/theme/monokai");
html_editor.getSession().setMode("ace/mode/html");
html_editor.session.setValue($("#my_html_hidden").text());
For Javascript
var html_editor = ace.edit("my_js");
html_editor.setTheme("ace/theme/monokai");
html_editor.getSession().setMode("ace/mode/html");
html_editor.session.setValue($("#my_js_hidden").text());
Then the HTML will be:
For HTML
<div id="my_html"></div><xmp id="my_html_hidden"><html>test</html></xmp>
For Javascript
<div id="my_js"></div><xmp id="my_js_hidden">myFunction() { alert ("Hello") } </xmp>
There are two key things here:
- I am loading the markup i want in the Ace editor into a div that has the css
display:none
. - I am using
xmp
tags so that the<html>
tags are not stripped.
You can see this implementation here:
http://jsfiddle.net/rwone/rAFSZ/1/
Bottle Route
@route('/static/js/ace/<filename>')
def server_static_js(filename):
return static_file(filename, root='/static/js/ace')
Other things that were important:
The order in which you initialise Ace editor when loading dynamic content.
The CSS was influential and just tweaking in Firebug didn't show actual results, CSS tweaks needed to be made on the server, then the page reloaded to see their effect (in regards to relative positioning etc).