Html 如何加载ace编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15599597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load ace editor
提问by Ben_hawk
I am trying to use the Ace code editor library (http://ace.ajax.org/), but im having trouble. According to the embedding guide, this should load the required js files from Amazons CDN.
我正在尝试使用 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>
However it fails, in Chromes console it shows:
但是它失败了，在 Chromes 控制台中它显示：
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
I also tried putting the ace library src-min folder locally and loading it with
我还尝试将 ace 库 src-min 文件夹放在本地并加载它
<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
Which also failed with the errors:
这也失败了错误：
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
Lastly I tried loading all the js resources in the ace src-min folder, which also failed with errors :S
最后，我尝试加载 ace src-min 文件夹中的所有 js 资源，但也失败并出现错误：S
采纳答案by Ben_hawk
I can't paste all the code in the comment, so I'll start to answer your question by updating this one. This works fine for me:
我无法在评论中粘贴所有代码，因此我将通过更新此代码来开始回答您的问题。这对我来说很好用：
<!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>
Can you test this at your end and see if you still get the problems? If this code (singular) is ok it's probably that some other JavaScript affects ACE.
你能在你的最后测试这个，看看你是否仍然遇到问题？如果此代码（单数）没问题，则可能是其他一些 JavaScript 影响了 ACE。
Here's a JSfiddle: http://jsfiddle.net/yDscY/. I get no errors in my Development Inspector.
这是一个 JSfiddle：http: //jsfiddle.net/yDscY/。我的开发检查器中没有错误。
I found the problem. If you have PHP or can do it with .htaccess. You have to send specific headers to comply to CORS (Cross Origin Resource Sharing).
我发现了问题。如果您有 PHP 或可以使用 .htaccess 来完成。您必须发送特定标头以符合 CORS（跨源资源共享）。
access-control-allow-origin: *
access-control-allow-credentials: true
After that it should work.
之后它应该工作。
Update
更新
I didn't test this part thoroughly, but it should work.
我没有彻底测试这部分，但它应该可以工作。
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials: "true"
</IfModule>
Good luck!
祝你好运！
回答by Robert Christian
The right answer is in the first comment:
正确答案在第一条评论中：
Try this editor.getSession().setUseWorker(false); and see if it still fails. Local won't work because as it's dependent on other online relative files. That's why the relative GET's are failing. I'm not getting any errors using the first online link tho. Maybe something else is interrupting your javascript? Can you show a fuller version of your HTML/JS file?
试试这个 editor.getSession().setUseWorker(false); 看看它是否仍然失败。本地将不起作用，因为它依赖于其他在线相关文件。这就是相对 GET 失败的原因。使用第一个在线链接我没有收到任何错误。也许其他东西正在打断你的javascript？你能展示你的 HTML/JS 文件的完整版本吗？
- Allendar, Mar 24 at 14:25
- Allendar，3 月 24 日 14:25
回答by Bharadwaj Srigiriraju
I faced trouble when trying to get this done. The code given in ACE homepage didn't work for me. I had all my files in local directory, but you can use a CDN instead if you want.
我在尝试完成这项工作时遇到了麻烦。ACE 主页中给出的代码对我不起作用。我的所有文件都在本地目录中，但如果需要，您可以改用 CDN。
I placed the ace directory from lib/aceinto my static/directory. Change that part to your own location.
我将 ace 目录lib/ace放入我的static/目录中。将该部分更改为您自己的位置。
I had to use Require.js api to load ace. This is the code that worked for me :
我不得不使用 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>
Source: https://github.com/ajaxorg/ace/issues/1017
来源：https: //github.com/ajaxorg/ace/issues/1017
Checkout this page if you get some crazy errors: http://requirejs.org/docs/errors.html
如果您遇到一些疯狂的错误，请查看此页面：http: //requirejs.org/docs/errors.html
回答by djthoms
I know this won't answer your question exactly but I'm writing this for people who land on this page and have the same problem where
我知道这不会完全回答您的问题，但我正在为登陆此页面并遇到相同问题的人写这篇文章
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials: "true"
</IfModule>
or
或者
editor.getSession().setUseWorker(false);
don't work.
不工作。
I had the same issue on Chrome. I tested my site in Firefox and Opera and it worked as expected. I kept getting Uncaught RangeError: Maximum call stack size exceedederrors when loading the page.
我在 Chrome 上遇到了同样的问题。我在 Firefox 和 Opera 中测试了我的网站，它按预期工作。Uncaught RangeError: Maximum call stack size exceeded加载页面时我不断收到错误消息。
The solution was to empty Chrome's cache and it worked again. Even a control/command + shift + ror control + F5wouldn't work. I literally had to go into the settings and empty the cache.
解决方案是清空 Chrome 的缓存，然后再次运行。即使一个control/command + shift + r或control + F5将不起作用。我真的不得不进入设置并清空缓存。
Again, I know this only partially relevant but this is for other who land on this page!
同样，我知道这只是部分相关，但这是为其他登陆此页面的人准备的！
