web-dev-qa-db-fra.com

Comment faire pour que l'éditeur d'ACE s'adapte à sa division parent

J'ai l'as div dans une autre div et j'aimerais que l'éditeur d'as règle sa largeur et sa hauteur à la div parente. J'appelle editor.resize () mais rien ne se passe.

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100px;
    }
</style>
</head>
<body style="height: 100%">
<div style="background-color: red; height: 100%; width: 100%;">
<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
</div>

<script src="ace-builds/src-noconflict/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");

    editor.resize();
</script>
</body>
</html>
htmlcssace-editor
15
user441521

Vous pouvez réaliser ce que vous voulez de deux manières. J'ai créé un jsfiddle montrant les css et javascript utilisés pour redimensionner Ace-Editor à son conteneur.

Le css utilisé sert à ce que l'éditeur prenne la largeur et la hauteur du conteneur, de sorte que editor.resize() puisse calculer correctement la taille de l'éditeur.

Je recommande ce qui suit pour que la fonction editor.resize() fonctionne.

<style type="text/css" media="screen">
    #editor {
        width: 100%;
        height: 100%;
    }
</style>

Toutefois, si vous souhaitez conserver le css actuel, vous avez pour #editor ce qui suit fonctionnera.

<style type="text/css" media="screen">
    #editor {
        position: absolute; /* Added */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
   }
</style>

et ajoutez position: relative; au conteneur, de sorte que l'éditeur en position absolue soit correctement placé dans son conteneur. Pour savoir comment cela fonctionne, je vous renvoie à Positionnement absolu dans le positionnement relatif.

10
scain

Utilisation de jquery-ace J'ai réussi ceci simplement en utilisant:

    $('#php_code').ace({
        theme: 'chrome',
        lang: 'php',
        width: '100%',
        height: '300px'
    })
3
kjdion84

Je l'ai eu avec CSS simple:

#container{
    height:80vh;
}

#editor {
    width: 100%;
    height: 100%;
    position: relative;
}

La propriété de clé est position:relative; elle remplace le position:absolute par défaut de l'éditeur as, ce qui empêche le conteneur parent d'ajuster son contenu.

<div id="container">
    <pre id="editor">
        &#x3C;div&#x3E;
        &#x9;&#x9;this is a div
        &#x9;&#x3C;/div&#x3E;
    </pre>
</div>

<script>
    $(document).ready(function() {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/TextMate");
        editor.session.setMode("ace/mode/html");
    });
</script>
3
Mario Vázquez

Vous pouvez réaliser de la manière suivante. Exécutez l'extrait de code par exemple.

var editor = ace.edit("editor");
        editor.setTheme("ace/theme/tomorrow_night");
        editor.session.setMode("ace/mode/xml");
        editor.session.setUseSoftTabs(true);
#parent {
    width:50%;
    height: 600px;
    display:inline-block;
    position:relative;
}
#editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
<html>
   <body>
      <div id="parent">
          <div id="editor"></div>
      </div>
   </body>
</html>

3
pot

Réinitialisez ses paramètres à la valeur par défaut du navigateur, ce qui, de par sa conception, convient au conteneur parent.

#editor {
    width: inherit !important;
}

J'utilise le wrapper de react-ace pour les reactjs. Cela pourrait être bénéfique pour tout wrapper de As ayant des valeurs par défaut remplacées.

1
Gal Margalit