Secciones 
Hace un rato el nuevo editor para secciones de tecnología de TadekChavez.com, Raúl Ponce (a.k.a Destructor) iba a publicar su primer post en el sitio con un tutorial en video sobre "como hacer un tutorial en video (screencast)".y se topó con que el editor que aquí utilizamos (TinyMCE) no le permitía agregar un iFrame, ni con una herramienta predeterminada ni desde código html. Esto es por cuestiones de seguridad (vulnerabilidades XSS).
Para todos aquellos que utilizan Joomla! sabrán que por default vienen con un editor javascript llamado TinyMCE, hasta la fecha aquí lo utilizamos, no lo he cambiado porque no habíamos requerido mayor funcionalidad que la de publicar texto, en el mayor de los casos, pero aquí les explico como pueden activar TinyMCE para que acepte objetos del tipo iFrame y ampliemos un poco la funcionalidad.
Un poco de información sobre la etiqueta HTML iFRAME
Esta etiqueta establece un marco que contiene un documento externo al documento (página web) donde se está observando.
Un ejemplo del código HTML para el uso de iFrame sería:
<iframe width=400 hegiht=400 frameborder="1" scrolling="yes" src="http://www.tadziotek.com">
<p>Texto que aparecerá en caso de que el navegador del usuario no acepte frames </p>
</iframe>
Esto nos mostraría:
Ahora bien, si introducimos el código directamente en el espacio de texto del editor, nos mostraría el mismo código en el artículo, tal y como ahora puedes ver el código de arriba, esto es porque TinyMCE automáticamente convierte el código HTML cambiando todos los "<" y ">" por "<" y "%gt" (algo como strip html tags). Lo que tenemos que hacer es insertar el código directamente en el HTML a través del botón HTML:
Una vez abierto el código HTML se supone que podríamos insertar el código ahí, pero es ahí cuando viene el problema, TinyMCE no está preparado para eso, por lo que en Joomla! primero tenemos que ir a Extensiones->Gestor de plugins-> TinyMCE y agregar un parámetro en el campo en la configuración del plugin:
1 - Clic para agrandar
2 - Clic para agrandar
3 - Clic para agrandarEn este caso, basta con agregar la siguiente línea a "Elementos válidos extendidos" dentro de la configuración del plugin (se puede ver arriba en la tercera imagen):
iframe[src|width|height|name|align]
De esta forma ya podemos introducir el código de un iFrame, directamente en el editor HTML del editor javascript TinyMCE.
Espero que también les funcione.
Tadek Chávez es el editor principal de este sitio. Ingeniero en sistemas computacionales especializado en ciencias de la computación con enfoque en sistemas abiertos. Director de tadzioTek
.
Comparte este artículo en tu red social preferida.
Comentarios