How to load ace editor | 易学教程

问题

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

回答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!

回答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

回答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

回答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>

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!

来源：https://stackoverflow.com/questions/15599597/how-to-load-ace-editor

标签

javascript

html

cdn

code-editor