Ace 编辑：为什么 theme/mode 没有改变？

Question

我正在尝试将 Ace 介绍到我的网站 - 这基本上有效 - 但由于某种原因我无法将它们更改为我想要的。

从 Kitchen Sink 我想将 "Tomorrow Night Bright" 设置为 Assembly x86 的主题和模式。

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">

        <title>...</title>

        <style type="text/css" media="screen">
            #editor { 
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        </style>

        <script src="scripts/lib/require.js"></script>
        <script>
            require.config({
                baseUrl: window.location.protocol + "//" + window.location.host
                    + window.location.pathname.split("/").slice(0, -1).join("/"),

                paths: {
                    ace: "scripts/lib/bower_components/ace/lib/ace"
                }
            });

            require(["ace/ace"], function (ace) {
                var editor = ace.edit("editor");
                window.alert(editor);
                editor.setTheme("scripts/lib/bower_components/ace/lib/ace/theme/tomorrow_night_bright");
                editor.getSession().setMode("scripts/lib/bower_components/ace/lib/ace/mode/assembly_x86");
            });
        </script>
    </head>
    <body>
        <div id="editor">
section .text
    global main         ;must be declared for using gcc

main:                   ;tell linker entry point

    mov edx, len        ;message length
    mov ecx, msg        ;message to write
    mov ebx, 1          ;file descriptor (stdout)
    mov eax, 4          ;system call number (sys_write)
    int 0x80            ;call kernel

    mov eax, 1          ;system call number (sys_exit)
    int 0x80            ;call kernel

section .data

msg db  'Hello, world!',0xa ;our dear string
len equ $ - msg         ;length of our dear string
        </div>
    </body>
</html>

出于某种原因，我看不到变化。我得到的只是一个简单的白色文本编辑器：

我错过了什么？

Answer 1

您必须加载："ace/ext/language_tools"：

require(["ace/ace"], function (ace) {
    var editor = ace.edit("editor");
    window.alert(editor);
    ace.config.loadModule('ace/ext/language_tools', function() {
        editor.setTheme("scripts/lib/bower_components/ace/lib/ace/theme/tomorrow_night_bright");
        editor.getSession().setMode("scripts/lib/bower_components/ace/lib/ace/mode/assembly_x86");
    })
});

希望能解决您的问题！

Answer 2

您在 chrome 开发者工具中看到任何错误了吗？ ace 很可能会尝试从错误的位置加载主题和模式，因为您已经在要求路径中定义了 ace，请使用 setMode("ace/mode/assembly_x86"); 而不是 scripts/...

Answer 3

好的，这就是我得到的。我试图在页面加载时更改主题。这有效：

var ace_root = "scripts/lib/bower_components/ace/lib/ace/";

require.config({
    baseUrl: window.location.protocol + "//" + window.location.host
        + window.location.pathname.split("/").slice(0, -1).join("/"),

    paths: {
        ace: ace_root
    }
});

require(["ace/ace"], function (ace) {
    var editor = ace.edit("editor");
    editor.setTheme(ace_root + "theme/tomorrow_night_bright");
    editor.getSession().setMode(ace_root + "mode/assembly_x86");
});

但这不起作用：

var ace_root = "scripts/lib/bower_components/ace/lib/ace";

require.config({
    baseUrl: window.location.protocol + "//" + window.location.host
        + window.location.pathname.split("/").slice(0, -1).join("/"),

    paths: {
        ace: ace_root
    }
});

require(["ace/ace"], function (ace) {
    var editor = ace.edit("editor");
    editor.setTheme(ace_root + "/theme/tomorrow_night_bright");
    editor.getSession().setMode(ace_root + "/mode/assembly_x86");
});

不同之处在于我是否将 / 放入 ace_root（工作）或不（不工作）。我不知道这是故意的还是什么原因。 Get the full HTML document I used here.

浏览器：Firefox 41.0.2

Ace 编辑：为什么 theme/mode 没有改变？

Ace Editor: Why does the theme/mode not change?

javascript

ace-editor