it-swarm.com.de

So laden Sie den Ace-Editor

Ich versuche, die Ace-Code-Editor-Bibliothek ( http://ace.ajax.org/ ) zu verwenden, aber ich habe Probleme. Gemäß der Anleitung zum Einbetten sollten hierdurch die erforderlichen js-Dateien von Amazons CDN geladen werden.

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

Es schlägt jedoch fehl, in der Chromes-Konsole wird Folgendes angezeigt:

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

Ich habe auch versucht, den AS-Library-Ordner src-min lokal zu platzieren und mit zu laden

<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>

Was auch mit den Fehlern fehlgeschlagen ist:

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

Schließlich habe ich versucht, alle js-Ressourcen in den Ordner "ace src-min" zu laden, was ebenfalls mit Fehlern fehlgeschlagen ist: S

18
Ben_hawk

Ich kann nicht den gesamten Code in den Kommentar einfügen. Daher werde ich Ihre Frage beantworten, indem Sie diese aktualisieren. Das funktioniert gut für mich:

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

Können Sie das an Ihrem Ende testen und sehen, ob Sie immer noch Probleme haben? Wenn dieser Code (Singular) in Ordnung ist, wirkt sich wahrscheinlich auch ein anderes JavaScript auf ACE aus.

Hier ist ein JSfiddle: http://jsfiddle.net/yDscY/ . Ich erhalte keine Fehler in meinem Development Inspector.

Ich habe das Problem gefunden. Wenn Sie PHP haben oder dies mit .htaccess tun können. Sie müssen bestimmte Header senden, um CORS (Cross Origin Resource Sharing) zu entsprechen.

access-control-allow-Origin: *
access-control-allow-credentials: true

Danach sollte es funktionieren.

Update

Ich habe diesen Teil nicht gründlich getestet, aber es sollte funktionieren.

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Credentials: "true"
</IfModule>

Viel Glück!

9
user1467267

Die richtige Antwort lautet im ersten Kommentar:

Versuchen Sie Folgendes: editor.getSession (). SetUseWorker (false); und sehen, ob es immer noch fehlschlägt. Local funktioniert nicht, da es von anderen Online-Dateien Abhängig ist. Deshalb scheitern die relativen GETs. Ich bekomme keine Fehler beim ersten Online-Link. Vielleicht unterbricht etwas Ihr Javascript? Können Sie eine vollständigere Version Ihrer Ihrer HTML/JS-Datei anzeigen?

- Allendar , 24. März um 14:25 Uhr

3

Ich hatte Probleme, als ich versuchte, das zu schaffen. Der auf der ACE-Homepage angegebene Code hat für mich nicht funktioniert. Ich hatte alle meine Dateien im lokalen Verzeichnis, aber Sie können auch ein CDN verwenden, wenn Sie möchten. 

Ich habe das Ass-Verzeichnis von lib/ace in meinem static/-Verzeichnis abgelegt. Ändern Sie diesen Teil an Ihrem eigenen Ort.

Ich musste Require.js api verwenden, um das Ass zu laden. Dies ist der Code, der für mich funktioniert hat:

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

Quelle: https://github.com/ajaxorg/ace/issues/1017

Überprüfen Sie diese Seite, wenn Sie einige verrückte Fehler erhalten: http://requirejs.org/docs/errors.html

1

Ich weiß, dass dies Ihre Frage nicht genau beantworten wird, aber ich schreibe dies für Leute, die auf dieser Seite landen und das gleiche Problem haben

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Credentials: "true"
</IfModule>

oder

editor.getSession().setUseWorker(false);

arbeite nicht.

Ich hatte das gleiche Problem in Chrome. Ich habe meine Site in Firefox und Opera getestet und es funktionierte wie erwartet. Beim Laden der Seite wurden Uncaught RangeError: Maximum call stack size exceeded-Fehler angezeigt.

Die Lösung bestand darin, den Cache von Chrome zu leeren und es funktionierte wieder. Sogar ein control/command + shift + r oder control + F5 würde nicht funktionieren. Ich musste buchstäblich in die Einstellungen gehen und den Cache leeren.

Wieder weiß ich, dass dies nur teilweise relevant ist, aber dies ist für andere, die auf dieser Seite landen!

0
djthoms