How To Load Ace Editor
Solution 1:
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!
Solution 2:
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?
- Allendar, Mar 24 at 14:25
Solution 3:
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.
I placed the ace directory from lib/ace into my static/ directory. Change that part to your own location.
I had to use Require.js api to load ace. This is the code that worked for me :
<!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
Checkout this page if you get some crazy errors: http://requirejs.org/docs/errors.html
Solution 4:
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 exceeded errors when loading the page.
The solution was to empty Chrome's cache and it worked again. Even a control/command + shift + r or control + F5 wouldn't work. I literally had to go into the settings and empty the cache.
Again, I know this only partially relevant but this is for other who land on this page!
Post a Comment for "How To Load Ace Editor"