Aprende a ajustar fácilmente la altura de la línea de una instancia del editor ACE.

Cómo cambiar la altura de la línea en ACE Editor

Recientemente, un usuario de mi aplicación Pocket Editor para Android informó un problema relacionado con la altura de la línea del editor, que parecía cortar algunos caracteres en su dispositivo. Después de probar e investigar por un tiempo, la mejor solución que se me ocurrió fue permitir que el usuario defina la altura de la línea del editor manualmente, de modo que, según sus necesidades, la altura de la línea podría ser mayor o menor para ajustar el editor para el dispositivo. resolución.

En Ace editor, esto debe hacerse automáticamente cuando se ajusta el tamaño de la fuente, sin embargo, como se menciona en algunos dispositivos móviles, no funciona como espera el usuario. Para resolver esto, simplemente puede ajustar la altura de línea de la propiedad CSS del elemento contenedor del editor ACE (el contenedor de inicialización), por ejemplo, si desea ajustarlo dinámicamente con JavaScript (ajustando la propiedad CSS):

<!-- Contenedor de Ace Editor -->
<div id="editor"></div>

<script>
    // 1. Inicializar editor
    let editor = ace.edit("editor");
    
    // 2. Define la altura de linea del contenedor de ACE
    editor.container.style.lineHeight = "2em";
    // Puedes usar cualquier unidad de CSS para ajustarlo p. ej. :
    // editor.container.style.lineHeight = "36px";

    // 3. Fuerza la actualizacion de tamanio de fuente
    editor.renderer.updateFontSize();
</script>

Alternativamente, puedes especificar la altura de la línea con CSS normalmente:

<style>
    #editor{
        line-height: 2em;
        /* Puedes usar la unidad CSS que desee para ajustar la altura de la línea p. ej. .:*/
        /* line-height: 36px; */
    }
</style>

<!-- Contenedor Ace Editor -->
<div id="editor"></div>

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores