这是Ace编辑器的GitHub回购：
https://github.com/ajaxorg/ace
我猜需要的文件是：
JS
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/ace.js
主题
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/theme-tomorrow.js
A模式
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/mode-javascript.js
工人
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/worker-javascript.js
实现方式为：
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");
});
瓶子路线
@route('/static/js/ace/<filename>')
def server_static_js(filename):
return static_file(filename, root='/static/js/ace')
我没有收到任何Firebug错误，但Ace编辑器没有显示。
让Ace编辑器在Bottle环境中工作所需的最低文件是什么？它们需要放在哪里？
编辑：Ace编辑器在添加上面的CSS规则后显示。
这就是我实现它的方式。
获取内的所有文件
https://github.com/ajaxorg/ace-builds/tree/master/src-noconflict
并放置在服务器上static/js/ace的文件夹中。
根据您是在Ace编辑器中显示Javascript还是HMTL，Ace代码将类似于：
对于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());
对于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());
然后HTML将是：
对于HTML
<div id="my_html"></div><xmp id="my_html_hidden"><html>test</html></xmp>
对于Javascript
<div id="my_js"></div><xmp id="my_js_hidden">myFunction() { alert ("Hello") } </xmp>
这里有两件关键的事情：
- 我正在将Ace编辑器中所需的标记加载到一个具有css
display:none的div中 - 我正在使用
xmp标签，以便不会剥离<html>标签
您可以在此处看到此实现：
http://jsfiddle.net/rwone/rAFSZ/1/
瓶子路线
@route('/static/js/ace/<filename>')
def server_static_js(filename):
return static_file(filename, root='/static/js/ace')
其他重要事项：
加载动态内容时初始化Ace编辑器的顺序。
CSS很有影响力，只是在Firebug中进行了调整并没有显示实际结果，需要在服务器上进行CSS调整，然后重新加载页面以查看其效果(关于相对定位等)。