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

你必须加载：＆＃34; ace / ext / language_tools＆＃34; ：

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 Editor：为什么主题/模式不会改变？

3 个答案: