What are the minimum files required to get Ace editor working in a Bottle environment and where do they need to be placed?

Viewed 2149

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.

1 Answers
Related