18

我正在尝试使用 Ace 代码编辑器库（http://ace.ajax.org/），但我遇到了麻烦。根据嵌入指南，这应该从亚马逊 CDN 加载所需的 js 文件。

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

但是它失败了，在 Chromes 控制台中它显示：

Could not load worker ace.js:1
DOMException {message: "SecurityError: DOM Exception 18", name: "SecurityError", code: 18, stack: "Error: An attempt was made to break through the se…cloudfront.net/src-min-noconflict/ace.js:1:76296)", INDEX_SIZE_ERR: 1…}
 ace.js:1

我还尝试将 ace 库 src-min 文件夹放在本地并加载它

<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>

这也因错误而失败：

Uncaught RangeError: Maximum call stack size exceeded
GET http://mysite/mode-javascript.js 404 (Not Found) 123f2c9_ace_1.js:1
GET http://mysite/notes/theme-monokai.js 404 (Not Found) 123f2c9_ace_1.js:1
Uncaught RangeError: Maximum call stack size exceeded

最后，我尝试加载 ace src-min 文件夹中的所有 js 资源，但也失败并出现错误：S

4

4 回答 4

9

我无法在评论中粘贴所有代码，因此我将通过更新此代码开始回答您的问题。这对我来说很好：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        #editor { 
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
    </style>
</head>
<body>
    <div id="editor">
        function foo(items) {
            var x = "All this is syntax highlighted";
            return x;
        }
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    </script>
</body>
</html>

你能在最后测试一下，看看你是否仍然遇到问题？如果这段代码（单数）没问题，可能是其他一些 JavaScript 影响了 ACE。

这是一个 JSfiddle：http: //jsfiddle.net/yDscY/。我的开发检查器没有任何错误。

我发现了问题。如果你有 PHP 或者可以用 .htaccess 来做。您必须发送特定的标头以遵守 CORS（跨源资源共享）。

access-control-allow-origin: *
access-control-allow-credentials: true

之后它应该工作。

更新

我没有彻底测试这部分，但它应该可以工作。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Credentials: "true"
</IfModule>

祝你好运！

于 2013-03-24T14:45:31.580 回答
3

正确答案在第一条评论中：

试试这个 editor.getSession().setUseWorker(false); 看看它是否仍然失败。本地不起作用，因为它依赖于其他在线相关文件。这就是相对 GET 失败的原因。使用第一个在线链接我没有收到任何错误。也许其他东西正在中断您的javascript？你能展示你的 HTML/JS 文件的完整版本吗？

-艾伦达尔，3 月 24 日 14:25

于 2013-08-21T19:10:42.410 回答
1

我在尝试完成这项工作时遇到了麻烦。ACE 主页中给出的代码对我不起作用。我的所有文件都在本地目录中，但如果需要，您可以使用 CDN。

我将 ace 目录从lib/ace我的static/目录中。将该部分更改为您自己的位置。

我不得不使用 Require.js api 来加载 ace。这是对我有用的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor">
    function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
    }
</div>
<script type="text/javascript" src="/static/require.js"></script>
<script>
    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: "/static/ace"
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    });
</script>
</body>
</html>

来源：https ://github.com/ajaxorg/ace/issues/1017

如果您遇到一些疯狂的错误，请查看此页面：http ://requirejs.org/docs/errors.html

于 2013-10-02T07:52:01.797 回答
0

我知道这不会完全回答您的问题，但我正在为登陆此页面并遇到同样问题的人写这篇文章

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Credentials: "true"
</IfModule>

或者

editor.getSession().setUseWorker(false);

不工作。

我在 Chrome 上遇到了同样的问题。我在 Firefox 和 Opera 中测试了我的网站，它按预期工作。Uncaught RangeError: Maximum call stack size exceeded加载页面时我不断收到错误消息。

解决方案是清空 Chrome 的缓存，然后它又可以工作了。即使是control/command + shift + rorcontrol + F5也行不通。我真的不得不进入设置并清空缓存。

同样，我知道这只是部分相关，但这适用于其他登陆此页面的人！

于 2013-03-31T18:17:32.457 回答