So laden Sie den Ace-Editor

Ich versuche, die Ace-Code-Editor-Bibliothek zu verwenden (http://ace.ajax.org/), aber ich habe Probleme. Entsprechend dem Einbettungshandbuch sollte dies die benötigten js-Dateien von Amazons CDN laden.So laden Sie den Ace-Editor

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

aber es scheitert, in Chromes es Konsole zeigt:

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 versucht, auch lokal die ACE-Bibliothek src-min-Ordner setzen und es mit

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

Belastung, die auch gescheitert mit den Fehlern:

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 im Ordner ace src-min zu laden, was auch mit Fehlern fehlschlug: S

Quelle

2013-03-24 Ben_hawk

Versuchen Sie, diese 'editor.getSession() setUseWorker (false) ; 'und sehen, ob es immer noch fehlschlägt. Local wird nicht funktionieren, da es von anderen relativen Online-Dateien abhängig ist. Deshalb versagen die relativen GETs. Ich bekomme keine Fehler mit dem ersten Online-Link tho. Vielleicht unterbricht etwas anderes Ihr Javascript? Können Sie eine umfangreichere Version Ihrer HTML/JS-Datei anzeigen? –

Wirklich komisch, es war auch in Firefox Fehler, Nachdem ich die Zeile hinzugefügt haben Sie mir gab es funktioniert, habe ich dann den Link entfernt und es hat auch funktioniert: S: S: S –

Sie meinen, Sie haben den Online-Link entfernt? Setzen Sie '' strict '; 'oben auf Ihr erstes JavaScript und checken Sie Firebug ein, wenn Sie feststellen, dass ein nicht existierendes Objekt fehlerhaft ist. Es wird den Fehler wahrscheinlich nicht explizit anzeigen, wenn Sie nicht nach dem Fehler suchen. –

Ich kann nicht den gesamten Code in den Kommentar einfügen, also werde ich anfangen, Ihre Frage zu beantworten Aktualisierung dieses. Dies 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 testen diese auf Ihrer Seite und sehen Sie, wenn Sie immer noch die Probleme bekommen? Wenn dieser Code (Singular) in Ordnung ist, hat wahrscheinlich ein anderes JavaScript Auswirkungen auf ACE.

Hier ist ein JSfiddle: http://jsfiddle.net/yDscY/. Ich bekomme keine Fehler in meinem Entwicklungsinspektor.

Ich habe das Problem gefunden. Wenn Sie PHP haben oder es 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.

aktualisieren

ich diesen Teil nicht gründlich testen, 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!

Quelle

2013-03-24 14:45:31

Ehrfürchtige Arbeit, danke Mann !!, ich werde das geben und sehen, ob es funktioniert, danke für die Hilfe –

Froh, dass ich helfen konnte :). Bitte komm zurück zu dieser Antwort, wenn es dir immer noch Probleme gibt und ich werde versuchen, es zu untersuchen. –

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

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

oder

editor.getSession().setUseWorker(false);

don‘ t arbeiten.

Ich hatte das gleiche Problem auf Chrome. Ich habe meine Website in Firefox und Opera getestet und es hat wie erwartet funktioniert. Ich habe Uncaught RangeError: Maximum call stack size exceeded Fehler beim Laden der Seite erhalten.

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

Wiederum weiß ich das nur teilweise relevant aber das ist für andere, die auf dieser Seite landen!

Quelle

2013-03-31 18:17:32 djthoms

Die richtige Antwort ist in den ersten Kommentar:

dieses editor.getSession Versuchen() setUseWorker (false);. und sehen, ob es immer noch fehlschlägt. Local wird nicht funktionieren, da es abhängig von anderen Online- relativen Dateien ist. Deshalb versagen die relativen GETs. Ich bin nicht bekommen irgendwelche Fehler mit dem ersten Online-Link tho. Vielleicht etwas sonst unterbricht Ihr Javascript? Können Sie eine vollere Version von Ihrer HTML/JS-Datei zeigen?

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

Quelle

2013-08-21 19:10:42

Scheint, als würde man die Fehlermeldung korrigieren, anstatt herumzuarbeiten, ist es besser. Arbeiter sind eine Optimierungstechnik, die eher einbezogen als vermieden werden sollte. – ThisClark

ich konfrontiert Schwierigkeiten bei dem Versuch, dies zu tun bekommen. Der auf der ACE-Homepage angegebene Code hat bei mir nicht funktioniert. Ich hatte alle meine Dateien im lokalen Verzeichnis, aber Sie können stattdessen ein CDN verwenden, wenn Sie möchten.

Ich legte das Ace-Verzeichnis von lib/ace in mein Verzeichnis static/. Ändern Sie diesen Teil zu Ihrem eigenen Standort.

Ich musste Require.js API verwenden, um As zu laden. Dies ist der Code, der für mich gearbeitet:

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

Kasse diese Seite, wenn Sie ein paar verrückte Fehler erhalten. http://requirejs.org/docs/errors.html

Quelle

2013-10-02 07:52:01

Antwort

Verwandte Themen