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.