让 Ace 编辑器在 Bottle 环境中工作所需的最少文件是什么？它们需要放在哪里？答案

【问题标题】：What are the minimum files required to get Ace editor working in a Bottle environment and where do they need to be placed?让 Ace 编辑器在 Bottle 环境中工作所需的最少文件是什么？它们需要放在哪里？
【发布时间】：2014-01-18 23:58:35
【问题描述】：

这是 Ace Editor 的 GitHub 存储库：

https://github.com/ajaxorg/ace

我猜需要的文件是：

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 环境中工作所需的最少文件是什么？它们需要放在哪里？

编辑：在上面添加 CSS 规则后显示 Ace 编辑器。

【问题讨论】：

标签： python-2.7 bottle ace-editor

【解决方案1】：

这就是我实现它的方式。

获取其中的所有文件：

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 调整，然后重新加载页面以查看其效果（关于相对定位等）。

【讨论】：