18

Aceコードエディタライブラリ（ http://ace.ajax.org/）を使用しようとしていますが、問題が発生しています。埋め込みガイドによると、これはAmazonsCDNから必要なjsファイルをロードする必要があります。

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

ただし、失敗します。Chromeコンソールでは、次のように表示されます。

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（Cross Origin Resource Sharing）に準拠するには、特定のヘッダーを送信する必要があります。

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ファイルのより完全なバージョンを表示できますか？

-Allendar 、3月24日14:25

于 2013-08-21T19:10:42.410 に答える
1

これを成し遂げようとしたとき、私は問題に直面しました。ACEホームページに記載されているコードが機能しませんでした。すべてのファイルをローカルディレクトリに保存しましたが、必要に応じて代わりにCDNを使用できます。

からaceディレクトリlib/aceを自分のstatic/ディレクトリに配置しました。その部分を自分の場所に変更します。

エースをロードするには、Require.jsapiを使用する必要がありました。これは私のために働いたコードです：

<!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 + rませcontrol + F5ん。私は文字通り設定に入り、キャッシュを空にしなければなりませんでした。

繰り返しますが、これは部分的にしか関連性がないことを私は知っていますが、これはこのページにアクセスする他の人のためのものです！

于 2013-03-31T18:17:32.457 に答える