gpt4 book ai didi

python-2.7 - 使 Ace 编辑器在 Bottle 环境中工作所需的最少文件是多少?需要将它们放置在哪里?

转载 作者:行者123 更新时间:2023-12-04 20:44:08 24 4
gpt4 key购买 nike

这是 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

一位 worker

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 中.
  • 我正在使用 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 调整,然后重新加载页面以查看它们的效果(关于相对定位等)。
  • 关于python-2.7 - 使 Ace 编辑器在 Bottle 环境中工作所需的最少文件是多少?需要将它们放置在哪里?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20867668/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com