Jak załadować edytor asa

Próbuję użyć biblioteki edytora kodów Ace (http://ace.ajax.org/), ale mam problemy. Zgodnie z instrukcją osadzania, powinno to załadować wymagane pliki js z Amazon CDN.Jak załadować edytor asa

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

Jednak to się nie powiedzie, w Chromes konsoli pokazuje:

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

Próbowałem też wprowadzenie folder src-min biblioteki ace lokalnie i ładuje go

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

który również nieudanej z błędami:

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

Na koniec próbowałem załadować wszystkie zasoby js w folderze ace src-min, co również nie powiodło się z błędami: S

Źródło

2013-03-24 Ben_hawk

Spróbuj 'editor.getSession() setUseWorker (fałsz) ; 'i zobacz, czy nadal się nie udaje. Lokalna nie będzie działać, ponieważ jest zależna od innych względnych plików online. Właśnie dlatego względne GET zawodzą. Nie otrzymuję żadnych błędów za pomocą pierwszego linku online. Może coś jeszcze przerywa twój JavaScript? Czy możesz pokazać pełniejszą wersję pliku HTML/JS? –

Naprawdę dziwne, to też było błąd w firefoxie. Po dodaniu linii, którą mi dałeś, zadziałało, a następnie usunąłem link i to zadziałało: S: S: S –

Masz na myśli, że usunąłeś link online? Wpisz ''use strict';' na górze swojego pierwszego JavaScriptu i sprawdź w Firebug, czy widzisz błąd w nieistniejącym obiekcie. Prawdopodobnie nie wykaże on usterki jawnie, chyba że ją sprawdzisz. –

Nie mogę wkleić całego kodu do komentarza, więc zacznę odpowiadać na twoje pytanie aktualizacja tego. To działa dobrze dla mnie:

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

Czy możesz to sprawdzić na końcu i sprawdzić, czy nadal masz problemy? Jeśli ten kod (w liczbie pojedynczej) jest w porządku, prawdopodobnie inne kody JavaScript wpływają na ACE. To jest JSfiddle: http://jsfiddle.net/yDscY/. Nie dostaję błędów w moim Inspektorze rozwoju.

Znalazłem problem. Jeśli masz PHP lub możesz to zrobić za pomocą .htaccess. Musisz wysłać określone nagłówki, aby zastosować się do CORS (Cross Origin Resource Sharing).

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

Po tym czasie powinno działać.

Aktualizacja

nie testowałem tę część dokładnie, ale to powinno działać.

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

Powodzenia!

Źródło

2013-03-24 14:45:31

Niesamowita praca, dzięki człowieku !!, dam to i zobacz, czy to działa, dzięki za pomoc –

Cieszę się, że mogłem pomóc :). Wracaj do tej odpowiedzi, jeśli nadal daje ci problemy, a ja postaram się o nią zagłębić. –

wiem, że to nie będzie dokładnie odpowiedzieć na to pytanie, ale piszę to dla osób, które lądują na tej stronie i mają ten sam problem gdzie

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

lub

editor.getSession().setUseWorker(false);

don” t działa.

Miałem ten sam problem w Chrome. Przetestowałem moją witrynę w Firefoksie i Operze i działało zgodnie z oczekiwaniami. Podczas ładowania strony ciągle występowały błędy Uncaught RangeError: Maximum call stack size exceeded.

Rozwiązaniem było opróżnienie pamięci podręcznej przeglądarki Chrome i działało to ponownie. Nawet control/command + shift + r lub control + F5 nie będzie działać. Dosłownie musiałem przejść do ustawień i opróżnić pamięć podręczną.

Ponownie, wiem, że to tylko częściowo istotne, ale to jest dla innych, którzy lądują na tej stronie!

Źródło

2013-03-31 18:17:32 djthoms

Prawo Odpowiedź jest w pierwszym komentarzu:

spróbować tej editor.getSession() setUseWorker (false);. i zobacz, czy nadal nie działa . Lokalny nie będzie działać, ponieważ jest zależny od innych plików względnych online . Właśnie dlatego względne GET zawodzą. Nie jestem uzyskiwanie jakichkolwiek błędów za pomocą pierwszego linku online tho. Może coś innego przerywa twój JavaScript? Czy możesz pokazać pełniejszą wersję pliku HTML/JS?

- Allendar, mar 24 w 14:25

Źródło

2013-08-21 19:10:42

Wygląda na to, że lepiej jest poprawić komunikat o błędzie, niż go obejść. Pracownicy są techniką optymalizacji, którą należy raczej uwzględnić, niż ją unikać. – ThisClark

I w obliczu problemów podczas próby, aby to zrobić. Kod podany na stronie głównej ACE nie działa dla mnie. Wszystkie moje pliki miałem w lokalnym katalogu, ale jeśli chcesz, możesz użyć CDN.

Umieściłem katalog ace z lib/ace w moim katalogu static/. Zmień tę część na swoją własną lokalizację.

Musiałem użyć aplikacji Require.js do ładowania asa. Jest to kod, który pracował dla mnie:

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

Źródło: https://github.com/ajaxorg/ace/issues/1017

Zamówienie tę stronę, jeśli masz jakieś pomylone błędy. http://requirejs.org/docs/errors.html

Źródło

2013-10-02 07:52:01

Jak załadować edytor asa

Odpowiedz

Powiązane problemy