A veces, cuando tenemos que elejir un editor para agregarlo a una pagina web, siempre, nos surgen dudas, sobre cual usar, que si FCKEditor, o TinymcEditor entre otros.
Por eso ha surgido EditArea, un editor escrito en Javascript, el cual sin duda nos deja gran sabor de boca, por sus carateristicas este editor es, mas bien un editor de codigo fuente, el cual esta diseñado para editar archivos de codigo fuente, como php, Css, html entre otros.
Pero sin duda lo mas importante es que incorpora coloreado de sintaxis.
Entre sus caracteristicas destacan:
- Fácil de integrar, incluir sólo un script y una llamada a la función
- Tabulación de apoyo (permitir a escribir bien el formato de código fuente)
- Buscar y reemplazar (con regexp)
- Personalizable en tiempo real de sintaxis (en la actualidad: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, Pascal, Basic, Brainf * ck)
- Auto-sangrado nuevas líneas
- Enumeracion de Línea
- Multilenguaje soporta (en la actualidad: croata, danés, Inglés, francés, alemán, italiano, japonés, polaco, portugués)
- Posible compresión gzip con PHP(comprimir los 12 principales archivos a un archivo de ~ 20Kb)
- Permitir múltiples instancias
- Modo de pantalla completa
- Posible integración mediante plugin
- Posibilidad de guardar y cargar las funciones de llamada
- Posibilidad de gestión dinámica de contenidos
- Pueden trabajar en el mismo entorno de “protype” y “mootools”.
Para usar lo es tan simple como esto, poner un id a nuestra area de texto y, a continuación, escribir nuestro siguiente codigo Javascript:
editAreaLoader. init ( { EditAreaLoader. Init ((
id: "exemple_3" // id of the textarea to transform Id: "exemple_3" / / id del texto para transformar
,start_highlight: true , Start_highlight: true
,font_size: "8" , Tamaño_fuente: "8"
,font_family: "verdana, monospace" , Font_family: "verdana, monoespaciada"
,allow_resize: "y" , Allow_resize: "y"
,allow_toggle: false , Allow_toggle: false
,language: "fr" , El idioma: "fr"
,syntax: "css" , La sintaxis: "css"
,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help" , La barra de herramientas: "new_document, guardar, cargar, |, charmap, |, búsqueda, go_to_line, |, deshacer, rehacer, |, select_font, |, change_smooth_selection, destacar, reset_highlight, |, ayuda"
,load_callback: "my_load" , Load_callback: "my_load"
,save_callback: "my_save" , Save_callback: "my_save"
,plugins: "charmap" , Plugins: "charmap"
,charmap_default: "arrows" , Charmap_default: "flechas"
} ) ; ));
Y listo.
con todo lo anterior ya tenemos un gran editor de codigo fuente en linea.
si desean ver los ejemplos de el resultado, visiten Ejemplo
Via | EditArea: Rich Sourcecode Editor
Related posts:
- [Recursos] Analisis de la velocidad de carga de la librerias JS John Resig nos sorprende nuevamente, ahora nos platica sobre PBWiki...
- [Ajax]Phototype, manipulando imagenes usando Javascript Feliz inicio de semana, una semana algo complicada para mi...
- [Ajax] Jaxer, ejecutando Ajax y Javascript en el servidor En muchos blogs, he escuchado hablar sobre Jaxer, asi que,...
- [Google-Ajax] Google Ajax Libraries API, La gran biblioteca de Librerias Ajax Leyendo el blog de Andrés Nieto veo una nueva iniciativa...
- [Tip-Javascript] Desempaquetando scripts Atendiendo a un email que me llego, de parte de...
Related posts brought to you by Yet Another Related Posts Plugin.
Comentar