我正在尝试使用 Ace 代码编辑器库(http://ace.ajax.org/ http://ace.ajax.org/),但我遇到了麻烦。根据嵌入指南,这应该从 Amazon 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
我还尝试将 ace 库 src-min 文件夹放在本地并使用
<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
我无法将所有代码粘贴到评论中,因此我将通过更新此代码来开始回答您的问题。这对我来说效果很好:
<!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/ http://jsfiddle.net/yDscY/。我的开发检查器中没有出现任何错误。
我发现了问题。如果您有 PHP 或者可以使用 .htaccess 来完成。您必须发送特定标头才能遵守 CORS(跨源资源共享)。
access-control-allow-origin: *
access-control-allow-credentials: true
之后它应该可以工作。
Update
我没有彻底测试这部分,但它应该可以工作。
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials: "true"
</IfModule>
祝你好运!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)