如何加載ace編輯器

我想使用Ace代碼編輯器庫（http://ace.ajax.org/），但即時通訊有問題。根據嵌入指南，這應該從Amazons CDN加載所需的js文件。如何加載ace編輯器

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

但是失敗的話，在鉻合金安慰它表明：

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（假） ;'看看它是否仍然失敗。本地將無法工作，因爲它依賴於其他在線相關文件。這就是爲什麼相對GET失敗。我沒有得到任何錯誤使用第一個在線鏈接壽。也許別的什麼中斷你的JavaScript？你能展示一個更完整的HTML/JS文件嗎？ – 2013-03-24 14:25:23

真的很奇怪，它也出現在Firefox的錯誤，當我添加了你給我的工作線，然後我刪除了鏈接，它也工作：S：S：S – 2013-03-24 14:37:03

你的意思是你刪除了在線鏈接？在你的第一個JavaScript的頂部放上''strict strict';'如果你發現它看不到一個不存在的對象，就檢查Firebug。它可能不會明確地顯示錯誤，除非您檢查它。 – 2013-03-24 14:39:53

我無法在評論中粘貼所有代碼，所以我將開始通過回答您的問題更新這一個。這對我很好：

<!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-24 14:45:31

非常棒的工作，謝謝！!!，我會給你一個去看看它是否有效，謝謝你的幫助 – 2013-03-24 15:01:06

很高興我能幫上忙：）。請回到這個答案，如果它仍然給你的問題，我會試着去看看它。 – 2013-03-24 15:03:29

我知道這並不完全回答你的問題，但我在寫這對誰登陸此頁面上有同樣的問題在那裏的人

<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失敗。我不是使用第一個在線鏈接得到任何錯誤。也許別的中斷你的JavaScript？你能展示一個更完整的版本你的HTML/JS文件嗎？

- Allendar，3月24日在14:25

來源

2013-08-21 19:10:42

似乎修復錯誤消息而不是解決此問題更好。工人是一種應該包含而不是避免的優化技術。 – ThisClark 2017-06-02 16:20:21

我試圖得到這個工作時所面臨的麻煩。 ACE主頁中給出的代碼並不適用於我。我將所有文件都放在本地目錄中，但如果需要，可以使用CDN。

我把lib/ace的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-02 07:52:01

如何加載ace編輯器

回答

相關問題