web-dev-qa-db-fra.com

Ajuster automatiquement la hauteur au contenu dans l'éditeur Ace Cloud 9

J'essaie d'ajouter le Ace editor à une page, mais je ne sais pas comment configurer automatiquement la hauteur en fonction de la longueur de son contenu.

Idéalement, cela fonctionnerait de manière à ce que lorsque le contenu change, la hauteur soit recalculée, mais je serais satisfait de la hauteur qui vient d'être définie lors du chargement de la page.

Pour un novice en JavaScript, quelqu'un peut-il m'aider à comprendre comment je calcule la longueur du code, combien de lignes il couvre, quelle est la nouvelle hauteur et comment je mets à jour le DOM afin de refléter cela?

J'ai trouvé cette suggestion dans un groupe Google, mais je ne comprends pas vraiment ce que ça fait et comment je l'obtiens pour ajuster la hauteur.

editor.getSession().getDocument().getLength() *
editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth()
javascriptace-editor
54
Mindthetic

(UPDATE: Je ne travaille pas avec cela pour le moment, mais ma réponse peut être obsolète. Pour essayer d'incorporer ce que d'autres ont fourni, je me ferai l'écho de leur mention des propriétés minLines et maxLines, par exemple 

editor.setOptions({
    maxLines: Infinity
});

Apparemment, l'infini n'est "pas une très bonne idée, car il va désactiver la fenêtre de visualisation virtuelle, même pour les très gros documents." Donc, choisir une limite peut être mieux.

Pour l’histoire, l’ancienne réponse était:

Le message que vous citez se base sur l'hypothèse qu'il s'agit d'une police à largeur fixe dont vous connaissez la hauteur des caractères et que vous connaissez le nombre de lignes du document. Multipliez ce résultat pour obtenir un nombre de pixels correspondant à la hauteur du contenu. La suggestion est que chaque fois que vous appuyez sur un caractère ou que vous coupez/collez (ce qui peut ajouter ou supprimer des lignes), vous utilisez JavaScript pour appliquer cette nouvelle taille concrète aux éléments de votre DOM avec des styles CSS.

(Ils jettent la "largeur" ​​d'une barre de défilement dans un calcul de hauteur, et honnêtement, je ne peux pas vous dire s'il y a une raison derrière cela ou non. Je laisserai quelqu'un d'autre calculer cette partie.)

Quoi qu'il en soit ... si vous utilisez un fond souple, le nombre de lignes d'écran rendues étendues peut être supérieur au nombre de lignes "réelles" du document. Il vaut donc mieux utiliser editor.getSession().getScreenLength() que editor.getSession().getDocument().getLength().

Je mets l'éditeur (position: absolute) à l'intérieur d'une section (position: relative), et c'est le seul élément vivant dans cette section. Ce code fonctionne apparemment pour moi pour le moment, je le mettrai à jour si j'en apprends plus ...!

$(document).ready(function(){

    var heightUpdateFunction = function() {

        // http://stackoverflow.com/questions/11584061/
        var newHeight =
                  editor.getSession().getScreenLength()
                  * editor.renderer.lineHeight
                  + editor.renderer.scrollBar.getWidth();

        $('#editor').height(newHeight.toString() + "px");
        $('#editor-section').height(newHeight.toString() + "px");

        // This call is required for the editor to fix all of
        // its inner structure for adapting to a change in size
        editor.resize();
    };

    // Set initial size to match initial content
    heightUpdateFunction();

    // Whenever a change happens inside the ACE editor, update
    // the size again
    editor.getSession().on('change', heightUpdateFunction);
}
80
HostileFork

Ace fournit une option: maxLines afin que vous puissiez simplement essayer:

editor.setOptions({
    maxLines: 15
});

http://jsfiddle.net/cirosantilli/9xdkszbz/

32
Dickeylth

Mise à jour: voir réponse de Dickeylth . Tout cela fonctionne toujours (et les gens semblent toujours le trouver utile), mais les fonctionnalités de base sont désormais intégrées à ACE.

Pour "ajuster automatiquement la hauteur au contenu dans l'éditeur Ace Cloud9", il vous suffit de redimensionner l'éditeur pour l'adapter à la div qui le contient, chaque fois que le contenu est modifié. En supposant que vous avez commencé avec <div id=editor>...

var editor = ace.edit("editor");                   // the editor object
var editorDiv = document.getElementById("editor");     // its container
var doc = editor.getSession().getDocument();  // a reference to the doc

editor.on("change", function() {
    var lineHeight = editor.renderer.lineHeight;
    editorDiv.style.height = lineHeight * doc.getLength() + "px";
    editor.resize();
});

Vous redimensionnez le div dans lequel l'éditeur réside, puis appelez editor.resize pour que l'éditeur remplisse le div.

Si vous collez du contenu avec de longues lignes, avec ACE défini pour envelopper les lignes, le nombre de nouvelles lignes et les lignes de rendu réelles seront différents, de sorte que l'éditeur fera défiler l'écran. Ce code corrigera ce problème, mais vous obtiendrez du défilement horizontal à la place.

editor.getSession().setUseWrapMode(false)
10
Carl Smith

Je pense qu'une solution pourrait être de compter le nombre de lignes dans l'éditeur, puis de le redimensionner pour l'adapter à ces lignes:

editor.setOptions({
     maxLines: editor.session.getLength()
});

J'espère que cela t'aides.

7
René Fernández

Vous pouvez utiliser jQuery:

 var length_editor = editor.session.getLength();
 var rows_editor = length_editor * 17;

 $('#editor').css('height',rows_editor);
2
JohnDoe Doe

Je suis d'accord avec la réponse acceptée, sauf que je préférerais editor.getSession().getScreenLength().

Le problème est que si vous activez le mode de bouclage, une longue ligne peut se diviser en plusieurs lignes. Ainsi, vous ne pourrez pas obtenir le nombre de lignes correct avec editor.getSession().getDocument().getLength().

1
AKFish

Ma méthode en JavaScript pur (remplacez editor-container par le bon identifiant).

function adaptEditor() {
    document.getElementById('editor-container').style.height = window.innerHeight + 'px';
    editor.resize();
}
window.onresize = function(event) {
    adaptEditor();
};
adaptEditor();
0
Fabien Sa

Cette variante fonctionne mieux pour moi car parfois le retour de editor.renderer.lineHeight 1

    var resize = function() {
     var minHt = 16;
     var sl = editor.getSession().getScreenLength();
     var sw = editor.renderer.scrollBar.getWidth();
     var lh = Math.max(editor.renderer.lineHeight, minHt);
     var ht = Math.max(((sl * lh) + sw), minHt);
     $('#myEditorDiv').height(ht);
     editor.resize();
   };
0
Paul