CF JSFiddle - integra ejemplos de HTML+CSS+JS en tus artículos Joomla

Hoy te traigo un nuevo campo personalizado para Joomla que te va a permitir integrar ejemplos de HTML+CSS+JS de forma fácil en los artículos de tu página web.

La idea de crear este campo personalizado para Joomla me la planteó un suscriptor de mi newsletter y, como lo vi relativamente sencillo, me puse manos a la obra para desarrollarlo.

Lo primero de todo fui a ver qué formas tenía JSFiddle para poder embeber los ejemplos que creaban los usuarios.

Por cierto, si no sabes qué es JSFiddle, se trata de fantástica herramienta web donde poner a prueba nuestro código HTML, CSS y Javascript de forma fácil y cómoda.

Después de crearme una cuenta para hacer las pruebas necesarias, en muy poco tiempo tenía desarrollado el campo personalizado.

El resultado que obtienes sería algo como esto:

Instalación y configuración

Con estos 4 simples pasos podrás utilizar el campo personalizado en tus artículos:

• Instalar el plugin utilizando el gestor de extensiones de Joomla!
• Habilitar el plugin
• Añadir el campo (JSFiddle) a tu componente
• Introducir la URL de JSFiddle:
  Ejemplo: https://jsfiddle.net/sergiois/65thr90q/2/

La verdad que no tengo mucho más que explicar sobre su uso ya que es muy sencillo.

Próximas versiones

Ya que estás leyendo este artículo te adelanto lo que voy a añadir en siguientes versiones:

• Posibilidad de poner el ejemplo en modo oscuro.
• Posibilidad de no incluir algunas de las pestañas que aparecen: JavaScript, HTML, CSS, Result.

Pero como digo, esto será más adelante.

Dónde descargarlo

Y este es el campo personalizado para Joomla que he desarrollado.

Tienes toda la información y puedes descargarla en mi GitHub: CF JSFiddle

Espero que te guste y te sirva para tus proyectos.

Si quieres ayudar a otros compañeros, comparte el artículo en Twitter haciendo clic a continuación.