web-dev-qa-db-fra.com

Commentaire chargeur ASE Editor

J'essaie d'utiliser la bibliothèque d'éditeur de code Ace ( http://ace.ajax.org/ ), mais j'ai des problèmes. Selon le guide d’incorporation, cela devrait charger les fichiers js requis à partir d’Amazons CDN.

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

Cependant cela échoue, dans la console Chromes cela montre:

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

J'ai également essayé de mettre le dossier src-min de la bibliothèque ace localement et de le charger avec

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

Ce qui a également échoué avec les erreurs:

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

Enfin, j'ai essayé de charger toutes les ressources js dans le dossier ace src-min, qui a également échoué avec des erreurs: S

javascripthtmlcdncode-editor
18
Ben_hawk

Je ne peux pas coller tout le code dans le commentaire, je vais donc commencer à répondre à votre question en mettant à jour celle-ci. Cela fonctionne bien pour moi:

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

Pouvez-vous tester cela de votre côté et voir si vous avez toujours les problèmes? Si ce code (singulier) est correct, il est probable qu'un autre script JavaScript affecte ACE.

Voici un JSfiddle: http://jsfiddle.net/yDscY/ . Je ne reçois aucune erreur dans mon inspecteur de développement.

J'ai trouvé le problème. Si vous avez PHP ou pouvez le faire avec .htaccess. Vous devez envoyer des en-têtes spécifiques pour vous conformer au CORS (Cross Origin Resource Sharing).

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

Après ça devrait marcher.

Update

Je n'ai pas testé cette partie à fond, mais ça devrait marcher.

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

Bonne chance!

9
user1467267

La bonne réponse est dans le premier commentaire:

Essayez ceci editor.getSession (). SetUseWorker (false); et voyez s'il échoue encore . Local ne fonctionne pas car il dépend d'autres fichiers relatifs en ligne . C'est pourquoi les GET relatifs échouent. Je ne reçois aucune erreur en utilisant le premier lien en ligne tho. Peut-être que quelque chose Est en train d'interrompre votre javascript? Pouvez-vous montrer une version plus complète de Votre fichier HTML/JS?

- Allendar , le 24 mars à 14h25

3
Robert Christian

J'ai fait face à des problèmes en essayant de faire cela. Le code indiqué dans la page d'accueil ACE ne fonctionnait pas pour moi. J'avais tous mes fichiers dans le répertoire local, mais vous pouvez utiliser un CDN à la place si vous le souhaitez. 

J'ai placé le répertoire as de lib/ace dans mon répertoire static/. Changer cette partie à votre propre emplacement.

Je devais utiliser Require.js api pour charger as. C'est le code qui a fonctionné pour moi:

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

Consultez cette page si vous rencontrez des erreurs insensées: http://requirejs.org/docs/errors.html

1
Forbidden Overseer

Je sais que cela ne répondra pas exactement à votre question, mais je l’écris pour les personnes qui atterrissent sur cette page et qui ont le même problème

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

ou

editor.getSession().setUseWorker(false);

ne travaille pas.

J'ai eu le même problème sur Chrome. J'ai testé mon site dans Firefox et Opera et cela a fonctionné comme prévu. Je continuais à avoir des erreurs Uncaught RangeError: Maximum call stack size exceeded lors du chargement de la page.

La solution était de vider le cache de Chrome et cela a fonctionné à nouveau. Même un control/command + shift + r ou control + F5 ne fonctionnerait pas. Je devais littéralement entrer dans les paramètres et vider le cache.

Encore une fois, je sais que ce n'est que partiellement pertinent mais c'est pour ceux qui atterrissent sur cette page!

0
djthoms