Menu
This is the GitHub repo for the Ace Editor:
https://github.com/ajaxorg/ace
I am guessing the required files are:
The JS
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/ace.js
A Theme
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/theme-tomorrow.js
A Mode
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/mode-javascript.js
A Worker
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/worker-javascript.js
With the implementation being:
HTML
<script src="/static/js/ace/ace.js"></script>
<div class="my_ace_editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
CSS
#my_ace_editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
jQuery
$(document).ready(function() {
var editor = ace.edit("my_ace_editor");
editor.setTheme("ace/theme/tomorrow");
editor.getSession().setMode("ace/mode/javascript");
});
Bottle Route
@route('/static/js/ace/<filename>')
def server_static_js(filename):
return static_file(filename, root='/static/js/ace')
I am not getting any Firebug errors but the Ace editor is not showing.
What are the minimum files required to get Ace editor working in a Bottle environment and where do they need to be placed?
Edit: Ace editor is showing after adding CSS rule above.
579
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:
display:none. 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).
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With