javascript - builds - Ajusta automáticamente la altura a los contenidos en el editor Ace Cloud 9

ace editor react

Question

Estoy intentando agregar el editor Ace a una página, pero no sé cómo configurar la altura automáticamente en función de la longitud de su contenido.

Idealmente funcionaría así que cuando el contenido cambia la altura se vuelve a calcular, pero me gustaría que la altura se establezca en la carga de la página.

Para un novato en JavaScript, ¿alguien me puede ayudar a descubrir cómo calculo la longitud del código, cuántas líneas abarca, cuál es la nueva altura y cómo actualizo el DOM para reflejar esto?

Encontré esta sugerencia en un grupo de Google, pero realmente no entiendo lo que está haciendo y cómo lo hago para ajustar la altura.

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

Answer 1

Ace proporciona una opción: maxLines para que simplemente puedas probar:

editor.setOptions({
    maxLines: 15
});

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

Answer 2

Actualización: vea la respuesta de Dickeylth . Todo esto todavía funciona (y la gente todavía parece encontrarlo útil), pero la funcionalidad básica está integrada en ACE ahora.

Para "ajustar automáticamente la altura a los contenidos en el editor Ace Cloud9", solo necesita cambiar el tamaño del editor para que se ajuste al div que lo contiene, siempre que se edite el contenido. Suponiendo que comenzó con <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();
});

Cambias el tamaño del div en el que vive el editor, luego llamas a editor.resize para que el editor vuelva a llenar el div.

Si pega contenido con líneas largas, con ACE configurado para ajustar líneas, la cantidad de líneas nuevas y líneas representadas reales será diferente, por lo que el editor se desplazará. Este código lo arreglará, pero obtendrás desplazamiento horizontal en su lugar.

editor.getSession().setUseWrapMode(false)

Answer 3

Creo que una solución podría ser contar el número de líneas en el editor y luego cambiar su tamaño para que se ajuste a estas líneas:

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

Espero que esto ayude.

Answer 4

Esta variante funciona mejor para mí, ya que a veces el editor.renderer.lineHeight devuelve 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();
   };

Answer 5

Estoy de acuerdo con la respuesta aceptada, excepto que preferiría editor.getSession().getScreenLength() .

El problema es que si habilita el modo de ajuste, una línea larga puede dividirse en varias líneas. Por lo tanto, no podrá obtener el recuento correcto de líneas con editor.getSession().getDocument().getLength() .

Answer 6

Mi método en JavaScript puro (reemplace el editor-container con el ID correcto).

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

Answer 7

Puedes usar jQuery:

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

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

Answer 8

(ACTUALIZACIÓN: No estoy trabajando con esto en este momento, pero mi respuesta puede estar desactualizada. Para intentar incorporar lo que otros han proporcionado, me haré eco de su mención de las propiedades minLines y maxLines, por ejemplo,

editor.setOptions({
    maxLines: Infinity
});

Aparentemente, el infinito "no es una muy buena idea, ya que desactivará la ventana gráfica virtual incluso para documentos muy grandes". Así que elegir un límite puede ser mejor.

Por el bien de la historia, la vieja respuesta fue:

La publicación que cita simplemente opera bajo el supuesto de que es una fuente de ancho fijo cuya altura de carácter conoce, y que conoce el número de líneas en el documento. Multiplique eso para obtener un conteo de píxeles de la altura del contenido. La sugerencia es que cada vez que se presiona un personaje o se produce un corte / pegado (que puede agregar o quitar líneas), utiliza JavaScript para aplicar este nuevo tamaño concreto a los elementos en su DOM con estilos CSS.

(Introducen el "ancho" de una barra de desplazamiento en un cálculo de altura, y sinceramente no puedo decirte si hay una razón detrás o no. Dejaré que otra persona lo resuelva).

De todos modos ... si tiene un ajuste suave, la cantidad de líneas de pantalla representadas puede ser mayor que el número de líneas "reales" en el documento. Por lo tanto, es mejor usar editor.getSession().getScreenLength() que editor.getSession().getDocument().getLength() .

Puse el editor (posición: absoluta) dentro de una sección (posición: relativa), y es el único elemento que vive en esa sección. ¡Este código parece funcionar para mí por ahora, lo actualizaré si aprendo más ...!

$(document).ready(function(){

    var heightUpdateFunction = function() {

        // http://.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);
}