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

エースコードエディタライブラリ（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

私もローカルエースライブラリSRC-分のフォルダを入れても失敗した

<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

出典

2013-03-24 Ben_hawk

この 'editor.getSession（）setUseWorker（false）を試してみてください。 ;そしてそれがまだ失敗するかどうか見てください。 Localは他のオンライン相対ファイルに依存しているため動作しません。そういうわけで、相対的なGETは失敗しているのです。私は最初のオンラインリンクを使用してエラーを取得していないよ。他の何かがあなたのJavaScriptを中断しているのでしょうか？ HTML/JSファイルのフルバージョンを表示できますか？ –

本当に奇妙なことに、Firefoxでもエラーが発生していました。私があなたに与えた行を追加した後、私はリンクを削除して、それも機能しました：S：S：S –

あなたはオンラインリンクを削除したということですか？あなたの最初のJavaScriptの上に '' use strict '; 'を入れて、存在しないオブジェクトにエラーがある場合はFirebugをチェックインしてください。あなたがそれをチェックしない限り、おそらく明示的にフォールトを表示しません。 –

コメントにすべてのコードを貼り付けることができません。これを更新します。これは正常に動作します：

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

これを最後にテストして問題が解決するかどうか確認してください。このコード（単数）がOKであれば、他の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-24 14:45:31

素晴らしい仕事、ありがとうございました!!私はそれを行って、それがうまくいくかどうかを確認します。助けてくれてありがとうございます –

お役に立てて嬉しいです：）。それでも問題が出たら、この答えに戻ってください。私はそれを調べようとします。 –

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

<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-31 18:17:32 djthoms

正しい答えは、最初のコメントである：。

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

- これを成し遂げるためにしようとしたとき14：25

出典

2013-08-21 19:10:42

エラーメッセージを回避するのではなく、エラーメッセージを修正する方が良いと思われます。労働者は避けるよりもむしろ含めるべきである最適化技術である。 – ThisClark

でAllendar、3月24日私はトラブルに直面しました。 ACEのホームページに掲載されているコードは私にとっては役に立たなかった。私はすべてのファイルをローカルディレクトリに持っていましたが、必要に応じてCDNを使用することができます。

lib/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

出典

2013-10-02 07:52:01

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

答えて

関連する問題