web-dev-qa-db-ja.com

aceエディターの読み込み方法

Aceコードエディタライブラリ（ http://ace.ajax.org/ ）を使用しようとしていますが、問題があります。埋め込みガイドによると、これにより、Amazons CDNから必要な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

javascripthtmlcdncode-editor
18
Ben_hawk

コメントにすべてのコードを貼り付けることはできないので、これを更新することで質問への回答を開始します。これは私にとってはうまくいきます：

<!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>

幸運を！

9
user1467267

正解は最初のコメントにあります：

このeditor.getSession（）。setUseWorker（false）;を試してください。それでも失敗するかどうかを確認します。ローカルは他のオンライン相対ファイルに依存しているため、機能しません。これが、相対GETが失敗する理由です。最初のオンラインリンクを使用してもエラーは発生しません。多分他の何かがあなたのJavaScriptを中断していますか？ HTML/JSファイルのフルバージョンを表示できますか？

-Allendar、3月24日14:25

3
Robert Christian

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

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

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

<!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

1
Forbidden Overseer

私はこれがあなたの質問に正確に答えないことを知っていますが、このページにアクセスして同じ問題を抱えている人々のためにこれを書いています

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

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

0
djthoms