python-2.7 – 让Ace编辑器在Bottle环境中工作所需的最小文件是
|
这是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>
这里有两个关键的事情： >我在Ace编辑器中将我想要的标记加载到具有css display：none的div中. 你可以在这里看到这个实现： 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调整,然后重新加载页面以查看其效果(关于相对定位等). （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |