¿Qué editor de código para aplicaciones web utilizar?

Tanto para el repositorio de Macro como para el WADC, me he encontrado con la necesidad de emular un editor en ambas Aplicaciones Web.

Buscando información encontré dos candidatos interesantes:

CodeMirror con licencia MIT
Ace Editor con licencia BSD

Ambos son compatibles con la licencia del proyecto (estoy preparando un post sobre el licenciamiento que enlazaré cuando lo termine). Existe una comparativa entre distintas alternativas entre las que se encuentran ambas que podéis encontrar aquí.

Finalmente decidí aprender a utilizar Ace Editor. Para iniciarlo utilizaremos:

<pre id="editor" style="width: 90%;"> //Lugar donde se mostrará
</pre>

<script src='js/plugins/ace-editor/ace.js' type="text/javascript" charset="utf-8"></script> //librería
<script>
var editor = ace.edit("editor"); //inicializamos
editor.setOptions({ //opciones
autoScrollEditorIntoView: true, //activa scroll 
minLines: 25, //en este caso el tamaño mínimo será de 25 líneas
maxLines: 25,//el tamaño máximo será de 25 líneas
wrap: true,
v: Date.now()

});
editor.renderer.setScrollMargin(10, 10, 10, 10); //margen scroll
editor.setTheme("ace/theme/merbivore"); // seteamos el tema
editor.session.setMode("ace/mode/perl"); //elegimos el lenguaje
editor.setAutoScrollEditorIntoView(true); // autoscroll

</script>

Esto nos mostrará una vista como la siguiente, una vez escritos los comandos:

Un problema con el que me encontré es que necesitaba realizar búsquedas y resaltar con colores las palabras encontradas. Esto puede parecer un comportamiento simple de programar aunque no fue tan sencillo debido a que la documentación no es tan extensa como a mi me hubiera gustado.

Necesitaríamos buscar línea a línea las cadenas que queremos señalar y encontrar su posición dentro de las líneas , una vez tenemos estos parámetros utilizaríamos la API de Ace Editor para crear marcadores (Marker) y añadirle una clase CSS preestablecida.

function findTextLineNumbers(text,positionInput) {
    let result=false

    if(text && text.length>1){

        const lines = editor.session.doc.getAllLines()//obtenemos líneas
        for (let i = 0; i < lines.length; i++) {
            let where = lines[i].indexOf(text)
            if ( where!= -1){
                let size= text.length
                highlight(i,where,size,colorsHighligth[positionInput%(lines.length)])
                result=true
            }
        }

    }

    return result
}

function highlight(lineNumber,where,size,color) {
    const Range = ace.require("ace/range").Range
    editor.session.addMarker(new Range(lineNumber, where ,lineNumber,where+size), "highlight-"+color, "text") // creamos un nuevo marcador donde lineNumber es el número de la línea, where es el comienzo de la cadena y where+size sería el final
}

Un ejemplo de clase para utilizar en los marcadores la podemos ver a continuación:

.highlight-green{
    position:absolute;
    z-index:20;
    background-color: green;
}

Con esto ya tenemos disponible un editor en nuestra aplicación web que facilitará la escritura de código y nos permitirá marcar cadenas dentro del mismo.

Leave a Reply Cancel reply