Cómo permitir que el usuario cambie el tamaño de una instancia de ACE Editor dinámicamente con una barra de arrastrar y soltar con JavaScript

Cómo permitir que el usuario cambie el tamaño de una instancia de ACE Editor dinámicamente con una barra de arrastrar y soltar con JavaScript

Un problema habitual al que se enfrentan algunos desarrolladores al implementar ACE Editor en su proyecto es el hecho de que el componente no permite modificar su tamaño dinámicamente por las acciones del usuario. Esto se convierte en un dolor de cabeza, ya que deberá implementar esta función usted mismo, encargándose de los eventos de cambio de tamaño de la ventana, arrastrar y soltar, etc. En caso de que esté comenzando con la implementación de dicha función, nos gustaría compartir con usted una información muy básica implementación usando jQuery para una instancia de ACE Editor de tamaño variable verticalmente. Aunque existen otras implementaciones, en su mayoría solo admiten una única instancia de ACE Editor, sin embargo, con este fragmento, podrá proporcionar soporte para cambiar el tamaño de varias instancias de ACE Editor.

En este artículo, le explicaremos cómo cambiar el tamaño de una o varias instancias de ACE Editor en la ventana del navegador utilizando jQuery o Vanilla JavaScript.

A. versión de jQuery

Se recomienda usar jQuery para manejar la función de cambio de tamaño de Ace Editor, debido a la facilidad de escribir el código y la animación durante los eventos del mouse (se verá más bonito que la versión Vanilla JS). Para comenzar, cree un objeto accesible globalmente que almacenará el estado de arrastre de la instancia de ace editor que desea cambiar de tamaño. Luego, incluya la función makeAceEditorResizable de la siguiente manera:

/**
 * Variable global para almacenar los identificadores del estado del editor as arrastrado actual.
 */
window.draggingAceEditor = {};

function makeAceEditorResizable(editor){
    var id_editor = editor.container.id;
    var id_dragbar = '#' + id_editor + '_dragbar';
    var id_wrapper = '#' + id_editor + '_wrapper';
    var wpoffset = 0;
    window.draggingAceEditor[id_editor] = false;

    $(id_dragbar).mousedown(function(e) {
        e.preventDefault();

        window.draggingAceEditor[id_editor] = true;
    
        var _editor = $('#' + id_editor);
        var top_offset = _editor.offset().top - wpoffset;
    
        // Establezca la opacidad del editor en 0 para hacer transparente para que se muestre nuestro div contenedor
        _editor.css('opacity', 0);
    
        // manejar el movimiento del mouse
        $(document).mousemove(function(e){
            var actualY = e.pageY - wpoffset;
            // Altura del editor
            var eheight = actualY - top_offset;
            
            // Establecer la altura de la envoltura
            $(id_wrapper).css('height', eheight);
            
            // Establecer la opacidad de la barra de arrastre mientras se arrastra (establecer en 0 para no mostrar)
            $(id_dragbar).css('opacity', 0.15);
        });
    });
    
    $(document).mouseup(function(e){
        if (window.draggingAceEditor[id_editor])
        {
            var ctx_editor = $('#' + id_editor);
    
            var actualY = e.pageY - wpoffset;
            var top_offset = ctx_editor.offset().top - wpoffset;
            var eheight = actualY - top_offset;
    
            $( document ).unbind('mousemove');
            
            // Establecer la opacidad de la barra de arrastre de nuevo a 1
            $(id_dragbar).css('opacity', 1);
            
            // Establezca la altura en el elemento del editor real y la opacidad de nuevo a 1
            ctx_editor.css('height', eheight).css('opacity', 1);
            
            // Activar el cambio de tamaño del editor ace()
            editor.resize();

            window.draggingAceEditor[id_editor] = false;
        }
    });
}

Luego, con esta función, puede convertir una instancia de editor ace ya inicializada en una de tamaño variable, teniendo en cuenta el siguiente marcado:

<div id="editor_wrapper" class="app_editor_wrapper">
    <div id="editor" class="app_editor">echo "Hello, this is some PHP code to edit";</div>
    <div id="editor_dragbar" class="app_editor_dragbar"></div>
</div>

Tenga en cuenta que el editor debe estar envuelto en un div con la misma identificación de su editor y _wrappercomo sufijo. El div dragbar tendrá también la misma identificación de su editor y como sufijo _dragbar. Una vez que tenga el marcado, puede inicializar fácilmente el editor ace y convertirlo en una versión redimensionable que proporcione la variable del editor ace como argumento para la función dada:

makeAceEditorResizable(aceEditorInstance);

Con esto, su editor debería ser ahora redimensionable verticalmente.

Ejemplo en vivo

El siguiente codepen muestra lo fácil que es jugar con 2 instancias de Ace Editor de tamaño variable.

See the Pen Resizable ACE Editor by Our Code World (@ourcodeworld) on CodePen.

B. Versión VanillaJS

A diferencia de su contraparte escrita con jQuery, la versión vanillajs no incluye una animación decente para cambiar el tamaño del elemento. Puede modificarlo y agregarlo si lo desea. El script funciona igual que el script jQuery:

/**
 * Versión de VanillaJS para hacer que el editor ace sea de tamaño variable verticalmente.
 * 
 * @param editor Ace Editor instance.
 */
function makeAceEditorResizable(editor){
    var id_editor = editor.container.id;
    var id_dragbar = id_editor + '_dragbar';
    var id_wrapper =  id_editor + '_wrapper';
    var wpoffset = 0;
    window.draggingAceEditor[id_editor] = false;

    var action_mousedown = function(e) {
        e.preventDefault();

        window.draggingAceEditor[id_editor] = true;

        // Establezca la opacidad del editor en 0 para hacer transparente para que se muestre nuestro div contenedor
        document.getElementById(id_editor).style.opacity = 0;
    
        document.addEventListener("mousemove", action_document_mousemove);
    };

    var action_document_mousemove = function(e){
        var _editor = document.getElementById(id_editor);
        var rect = _editor.getBoundingClientRect();

        var rsl = {
            top: rect.top + document.body.scrollTop
        };

        var top_offset = rsl.top - wpoffset;

        var actualY = e.pageY - wpoffset;

        // Altura del editor
        var eheight = actualY - top_offset;
        
        // Establecer la altura de la envoltura
        document.getElementById(id_wrapper).style.height = eheight;
        
        // Establecer la opacidad de la barra de arrastre mientras se arrastra (establecer en 0 para no mostrar)
        document.getElementById(id_dragbar).style.opacity =  0.15;
    };

    document.getElementById(id_dragbar).addEventListener("mousedown", action_mousedown);
 
    var action_mouseup = function(e){
        if (window.draggingAceEditor[id_editor])
        {
            var ctx_editor = document.getElementById(id_editor);
            
            var rect = ctx_editor.getBoundingClientRect();

            var rsl = {
                top: rect.top + document.body.scrollTop
            };

            var actualY = e.pageY - wpoffset;
            var top_offset = rsl.top - wpoffset;
            var eheight = actualY - top_offset;
            
            document.removeEventListener("mousemove", action_document_mousemove);
            
            // Establecer la opacidad de la barra de arrastre de nuevo a 1
            document.getElementById(id_dragbar).style.opacity = 1;
            
            // Establezca la altura en el elemento del editor real y la opacidad de nuevo a 1
            ctx_editor.style.height = eheight + "px";
            ctx_editor.style.opacity = 1;
            
            // Activar el cambio de tamaño del editor ace ()
            editor.resize();

            window.draggingAceEditor[id_editor] = false;
        }
    };

    document.addEventListener("mouseup", action_mouseup);
}

Requiere el mismo estilo de marcado:

<div id="editor_wrapper" class="app_editor_wrapper">
    <div id="editor" class="app_editor">echo "Hello, this is some PHP code to edit";</div>
    <div id="editor_dragbar" class="app_editor_dragbar"></div>
</div>

Tenga en cuenta que el editor debe estar envuelto en un div con la misma identificación de su editor y _wrappercomo sufijo. El div dragbar tendrá también la misma identificación de su editor y _dragbarcomo sufijo. Una vez que tenga el marcado, puede inicializar fácilmente el editor ace y convertirlo en una versión redimensionable que proporcione la variable del editor ace como argumento para la función dada:

makeAceEditorResizable(aceEditorInstance);

Con esto, tu editor debería ser ahora redimensionable verticalmente.

Ejemplo vivo

El siguiente codepen muestra lo fácil que es jugar con 2 instancias de Ace Editor de tamaño variable con Vanilla JS.

See the Pen Resizable ACE Editor with Vanilla JS by Our Code World (@ourcodeworld) on CodePen.

En algunos casos de uso, por ejemplo, cuando se puede desplazar toda la ventana, es posible que tenga problemas con el desplazamiento generado por el método getBoundingClientRect de JavaScript.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable