[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla # CF JSFiddle - integra ejemplos de HTML+CSS+JS en tus artículos Joomla [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 02 Junio 2021 [Extensiones](https://sergioiglesias.net/blog/extensiones) 1 - 2 minutos Visitas: 3628 - - [ Proyecto Joomla ](https://sergioiglesias.net/etiquetas/proyecto-joomla) - [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla) - [ Extensiones Joomla ](https://sergioiglesias.net/etiquetas/extensiones-joomla) ![](https://sergioiglesias.net/images/blog/extensiones/cf-jsfiddle.jpg) 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. CF JSFiddle - Campo personalizado #Joomla para integrar ejemplos de HTML+CSS+JS en tus artículos - #MejorConJoomla [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/extensiones/cf-jsfiddle-integra-ejemplos-de-html-css-js-en-tus-articulos-joomla "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fcf-jsfiddle-integra-ejemplos-de-html-css-js-en-tus-articulos-joomla&text=CF%20JSFiddle%20-%20Campo%20personalizado%20%23Joomla%20para%20integrar%20ejemplos%20de%20HTML%2BCSS%2BJS%20en%20tus%20art%C3%ADculos%20-%20%23MejorConJoomla "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=CF%20JSFiddle%20-%20Campo%20personalizado%20%23Joomla%20para%20integrar%20ejemplos%20de%20HTML%2BCSS%2BJS%20en%20tus%20art%C3%ADculos%20-%20%23MejorConJoomla%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fcf-jsfiddle-integra-ejemplos-de-html-css-js-en-tus-articulos-joomla "Envíalo") Si aún no sabes qué es un campo personalizado en Joomla te comparto un par de artículos para que puedas ver qué son y cómo se usan: - [Cómo usar un campo personalizado en un artículo Joomla](https://sergioiglesias.net/blog/joomla/439-como-usar-un-campo-personalizado-en-un-articulo-joomla) - [Campos personalizados Joomla para tu página web de podcast](https://sergioiglesias.net/blog/extensiones/458-campos-personalizados-joomla-para-tu-pagina-web-de-podcast) La idea de crear este **campo personalizado para Joomla** me la planteó un [suscriptor de mi newsletter](https://sergioiglesias.net/=%22https://sergioiglesias.net/curso-desarrollo-plantillas-joomla%22) 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](https://jsfiddle.net/), 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](https://sergiois.github.io/es/cfjsfiddle.html) 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. CF JSFiddle - Campo personalizado #Joomla para integrar ejemplos de HTML+CSS+JS en tus artículos - #MejorConJoomla [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/extensiones/cf-jsfiddle-integra-ejemplos-de-html-css-js-en-tus-articulos-joomla "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fcf-jsfiddle-integra-ejemplos-de-html-css-js-en-tus-articulos-joomla&text=CF%20JSFiddle%20-%20Campo%20personalizado%20%23Joomla%20para%20integrar%20ejemplos%20de%20HTML%2BCSS%2BJS%20en%20tus%20art%C3%ADculos%20-%20%23MejorConJoomla "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=CF%20JSFiddle%20-%20Campo%20personalizado%20%23Joomla%20para%20integrar%20ejemplos%20de%20HTML%2BCSS%2BJS%20en%20tus%20art%C3%ADculos%20-%20%23MejorConJoomla%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fcf-jsfiddle-integra-ejemplos-de-html-css-js-en-tus-articulos-joomla "Envíalo") [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado ### ¿No sabes bien en qué estado está tu web Joomla? Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden. Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML [ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables [![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS. [](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias") ### Suscríbete a mi newsletter ¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo. Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**. [Quiero apuntarme!](https://sergioiglesias.net/newsletter) ### No hay comentarios ### Deja tu comentario En respuesta a Some User Nombre \* Dirección de email \* Texto del comentario \* Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*