16 ago

Editor jQuery

Durante las clases, cuando muestro algún ejemplo de javascript/jquery, suelo recurrir al método de escribir código en un editor (mi favorito es el scite) y para ver el resultado, voy al browser (generalmente firefox) y ahi suelo ejecutar o recargar la página.

El punto es que en esos cursos iniciales, me encuentro en la mayoría de los casos, que tengo que mostrar ejemplos muy pequeños de lo que es la manipulación del DOM.

Pantallazo-jquery editor

Se me ocurrió en un principio construir un textarea en donde pueda escribir el código y luego mediante la función eval() pueda ejecutar el código ingresado. El código modificaría los elementos del documento. Esto me permitiría mostrar las modificaciones “onthefly” mostrando el código. Para poder modificar el código html de la misma manera construí otro textarea en donde pueda ingresar nuevos nodos y luego ejecutaría el método “append()” de jquery, para ingresar el código html en el div principal.

Un primer prototipo tan burdo como lo que conté, fue lo que funcionó inicialmente. Alguien que vio esto me recomendó el jsfiddle un sitio que para el caso, cumple la misma funcionalidad. Solo que esté es sumamente complejo y con muchas funcionalidades. Una de las cosas que más me llamó la atención fueron los editores de código que tiene. Eso sería de suma utilidad para aplicación mia.

En un principio intenté construir un editor de código, haciendo un textarea transparente y por debajo unos divs y spans que se cargarían con lo que se está escribiendo a cada keypress() y esos textos en el html de abajo estarían del mismo color del fondo. Obviamente no es posible darle muchos estilos a eso para palabras reservadas y { }, “” o ().

Investigando el código descubro una librería que hace todo ese trabajo y que basta con implementarla: el code mirror

Con una documentación bastante completa aunque escueta, el codemirror parece ser el recurso óptimo para la implementación de un editor online para ver como es su implementación nada como ver la documentación oficial

Y finalmente, el editor de código en cuestión, para poder probar algunas cuestiones de jquery.



Comments are closed.



Contacto