Siguiendo con traducciones relativas a los excelentes trabajos de Peter van Westen, esta vez, les traigo este plugin que tiene una larga trayectoria y que ha sido recientemente actualizado. Nos sirve para introducir código en nuestros artículos, componentes, módulos e inclusive en títulos. Muchos, sobre todo aquellos que tienen webs en donde publican tutoriales o ayudas, seguramente utilizarán algún programa o plugin que facilita la introducción de código sin que éste «se ejecute», por ejemplo: chilicode, codecitation, etc., en este caso acontece al revés, es decir, el código que introduzcamos sí se ejecutará. Esto nos abre innumerables posibilidades y funcionalidades extras que podemos darle a nuestro sitio.

Los códigos admitidos son del tipo PHP, Javascript, CSS y Html y se utiliza muy fácilmente incorporando los mismos dentro de una etiqueta predefinida desde la configuración del plugin como veremos más adelante. Recuerden que cualquier código que introduzcamos dentro de esas etiquetas hará lo que lo debe hacer es decir, aquello para lo que fue programado. A continuación les dejo un mini tutorial para que aprendan a utilizarlo y conozcan todas sus características.

Empezaré diciéndoles que se instala como cualquier otra extensión Joomla! y una vez realizada esta tarea tendremos dos opciones de configuración localizadas en el Gestor de Plugin: botón del editor y plugin del sistema. Veamos por partes:
1- Editor Button Sourcer [ir]
2- Particularidades del Editor [ir]
3- Configuración del plugin [ir]
4- Plugin de sistema [ir]
5- Descarga [ir]

Editor Button – Sourcerer»

Lo que hace este plugin es incorporar un nuevo botón en la barra de botones del editor de texto que usemos ( TinyMCE, JCE, etc.) de manera que la misma se verá de esta forma:

Botón de Soucerer

Si clickeamos sobre este nuevo botón (y si la configuración es la que por defecto se instala), nos aparecerá un editor de código que se verá así:
Editor de Soucerer

Este editor nos pondrá las etiquetas y nos dará una pista sobre cómo utilizar el plugin. Para ello agrega un código colocando etiquetas predefinidas y dándonos una orientación respecto a cada lenguaje soportado. Es decir, si ponemos código javascript el mismo deberá respetar la sintaxis que se ejemplifica, lo mismo si fuese código PHP; esto es, utilizar las etiquetas: script y php respectivamente y como se ve en la imagen. El código por defecto a mostrar es configurable desde el back-end como veremos más adelante. [volver al indice]

Particularidades del Editor
Posee las siguientes utilidades:
– Un botón para ver el código en pantalla completa.
– Un botón para deshacer/rehacer.
– Un menú para elegir el tamaño de la fuente,
– Un menú descolgable de donde elegir qué lenguaje vamos a insertar.
– A continuación de este menú, presenta tres botones: el primero intercambia el color de la sintaxis, borrar el color de la sintaxis y otro para conmutar palabras.
– Un botón «Conmutador del Editor» que «apaga» el editor mostrándonos solo texto plano.
– Un botón «Conmutador de Etiquetas (source) « el cual pone o quita las etiquetas del plugin.
– Un botón «Estilo del Conmutador de Etiqueta» que nos sirve para cambiar las etiquetas <> por corchetes dobles. Esto evitará que los editores las eliminen como pasa con frecuencia.
– Una casilla de verificación «Preservar tabulaciones» que si está marcada evitará que perdamos los espacios (sangrías y tabulaciones) de nuestro código.
– Una casilla de verificación «Preservar colores» que si está marcada, los colores incluídos en la sintáxis del código también será agregada.

Por admin

Deja una respuesta

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO