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

J’essaie d’append l’ éditeur Ace à une page, mais je ne sais pas comment définir automatiquement la hauteur en fonction de la longueur de son contenu.

Idéalement, cela fonctionnerait bien lorsque le contenu change, la hauteur est recalculée, mais je serais heureux que la hauteur soit juste définie sur le chargement de la page.

Pour un novice JavaScript, quelqu’un peut-il m’aider à déterminer la longueur du code, le nombre de lignes qu’il couvre, la nouvelle hauteur et la manière dont je mets à jour le DOM pour refléter cela?

J’ai trouvé cette suggestion dans un groupe de Google, mais je ne comprends pas vraiment ce que cela fait et comment je le fais pour ajuster la hauteur.

editor.getSession().getDocument().getLength() * editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth() 

    (MISE À JOUR: je ne travaille pas avec ceci pour le moment, mais ma réponse est peut-être dépassée. Pour essayer d’incorporer ce que les autres ont fourni, je ferai écho à 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 désactivera la fenêtre virtuelle même pour les très gros documents”. Donc, choisir une limite peut être mieux.

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


    Le message que vous citez fonctionne simplement en supposant qu’il s’agit d’une police de largeur fixe dont vous connaissez la hauteur, et que vous connaissez le nombre de lignes du document. Multipliez que, ensemble, vous obtenez un nombre de pixels pour la taille du contenu. La suggestion est que chaque fois qu’un caractère est pressé ou qu’un couper / coller se produit (ce qui peut append ou supprimer des lignes), vous utilisez JavaScript pour appliquer cette nouvelle taille concrète aux éléments de votre DOM avec les styles CSS.

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

    Quoi qu’il en soit … si vous avez activé le soft, le nombre de lignes d’écran rendues peut être supérieur au nombre de lignes “réelles” du document. Il est donc préférable d’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 semble fonctionner pour moi pour le moment, je le mettrai à jour si j’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.toSsortingng() + "px"); $('#editor-section').height(newHeight.toSsortingng() + "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); } 

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

     editor.setOptions({ maxLines: 15 }); 

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

    Mise à jour: Voir la réponse de Dickeylth . Tout fonctionne toujours (et les utilisateurs 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 qu’il corresponde à la div qui le contient, chaque fois que le contenu est modifié. En supposant que vous ayez commencé avec

     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 editor.resize vit l’éditeur, puis appelez editor.resize pour que l’éditeur remplisse le div.

    Si vous collez du contenu avec des lignes longues, avec ACE défini pour envelopper les lignes, le nombre de nouvelles lignes et les lignes de rendu réelles seront différentes, donc l’éditeur défilera. Ce code corrigera cela, mais vous obtiendrez un défilement horizontal à la place.

     editor.getSession().setUseWrapMode(false) 

    Je pense qu’une solution peut consister à compter le nombre de lignes dans l’éditeur puis à la redimensionner pour qu’elle corresponde à ces lignes:

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

    J’espère que cela t’aides.

    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 Wrap, une ligne longue peut se diviser en plusieurs lignes. Ainsi, vous ne pourrez pas obtenir un nombre de lignes correct avec editor.getSession().getDocument().getLength() .

    Vous pouvez utiliser jQuery:

      var length_editor = editor.session.getLength(); var rows_editor = length_editor * 17; $('#editor').css('height',rows_editor); 

    Cette variante fonctionne mieux pour moi car parfois editor.renderer.lineHeight renvoie 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(); }; 

    Ma méthode en JavaScript pur (remplacez l’ 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();