如何加载ace编辑器 [英] How to load ace editor
问题描述
我尝试使用Ace代码编辑器库（ http://ace.ajax.org/ ），但我有麻烦。根据嵌入指南，这应该从Amazons CDN加载所需的js文件。
< script src =http：/ /d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.jstype =text / javascriptcharset =utf-8>< / script>
然而，它失败了，在Chromes控制台显示：
无法加载worker ace.js：1
DOMException {message：SecurityError：DOM Exception 18，name：SecurityError，code：18，stack： 错误：尝试突破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.jstype =text / javascriptcharset =utf-8>< /脚本>
以下错误也失败：
未捕获的RangeError：超过最大调用堆栈大小
GET http：//mysite/mode-javascript.js 404（未找到）123f2c9_ace_1.js：1
GET http ：//mysite/notes/theme-monokai.js 404（未找到）123f2c9_ace_1.js：1
Uncaught RangeError：超过最大调用堆栈大小
最后，我试着加载ace src-min文件夹中的所有js资源，这也失败了：S
我无法在评论中粘贴所有代码，因此我将通过更新此代码开始回答您的问题。这适用于我：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< title> HTML< / title>
< style>
#editor {
position：absolute;
top：0;
right：0;
bottom：0;
剩下：0;
}
< / style>
< / head>
< body>
< div id =editor>
函数foo（items）{
var x =所有这些都是语法高亮的;
return x;
}
< / div>
< script src =https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.jstype =text / javascriptcharset =utf-8> < /脚本>
< 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
之后它应该可以工作。 p>
更新
< IfModule mod_headers.c>
标题集Access-Control-Allow-Origin*
标题集Access-Control-Allow-Credentials：true
祝你好运！
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.
<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:
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
<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
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.
Here's a JSfiddle: http://jsfiddle.net/yDscY/. I get no errors in my Development Inspector.
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).
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!
这篇关于如何加载ace编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
