如何加载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编辑器

回答

相关问题