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

StackOverflow https://stackoverflow.com/questions/20867668

  •  23-09-2022
  •  | 
  •  

سؤال

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.

هل كانت مفيدة؟

المحلول

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).

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top