use*_*287 5 bottle python-2.7 ace-editor
这是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
一种模式
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编辑器.
我就是这样实现的。
获取其中的所有文件：
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>
这里有两个关键点：
display:none。 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 调整，然后重新加载页面以查看其效果（关于相对定位等）。
| 归档时间： |
|
| 查看次数： |
1155 次 |
| 最近记录： |