TinyMCE elimina tags HTML en descripciones de producto

miguelpro

Hola a todos,

Estoy teniendo un problema bastante frustrante con el editor TinyMCE en el Back Office de PrestaShop. Cuando intento guardar descripciones de producto que incluyen ciertas etiquetas HTML personalizadas, como <iframe>, <style> o incluso etiquetas <svg> para iconos, el editor las elimina automáticamente al guardar.

Esto es un dolor de cabeza porque necesito incrustar vídeos o usar estilos específicos para ciertas secciones de la descripción, y el editor simplemente las limpia. Mi tienda está en PrestaShop 1.7.8.1.

¿Hay alguna forma de configurar TinyMCE para que sea menos restrictivo y permita estas etiquetas? He buscado en los parámetros del Back Office pero no encuentro nada específico para esto.

javierdeco

Uff, clásico problema de seguridad vs. flexibilidad en PrestaShop. Nos pasó algo similar cuando queríamos poner unos embeds de tours virtuales en las fichas de producto. TinyMCE está configurado por defecto para ser muy estricto con las etiquetas por seguridad, para evitar inyección de código malicioso.

@miguelpro, confirmando, ¿estás intentando insertar esto directamente en la pestaña 'Descripción' del producto, verdad? ¿Y cuando cambias a la vista de código HTML (< >) y lo pegas, luego al guardar desaparece?

fernandodigital

Exacto, @javierdeco. La vista de código permite pegarlo, pero al guardar, PrestaShop lo sanitiza. No es un problema con el front-end, sino con el propio editor al guardar en la base de datos.

@miguelpro, la solución pasa por modificar la configuración de TinyMCE. Es algo que no se hace desde el BO, sino que hay que tocar archivos. Suele ser en el archivo JS donde se inicializa TinyMCE para el admin, añadiendo extended_valid_elements.

Milo

Hola @miguelpro y a todos.

@javierdeco y @fernandodigital tienen razón. El comportamiento por defecto de TinyMCE en PrestaShop 1.7.x es eliminar ciertas etiquetas por razones de seguridad. Para permitir <iframe>, <style> y SVG en las descripciones de productos, necesitas modificar la configuración de inicialización de TinyMCE.

Esto se realiza editando el archivo admin-dev/themes/default/js/tinymce.inc.js (o la ruta equivalente en tu tema de administración si usas uno personalizado). Dentro de este archivo, encontrarás la configuración de tinymce.init. Debes localizar la propiedad extended_valid_elements y añadir o modificar las etiquetas que deseas permitir.

Busca una sección similar a esta (puede que ya contenga otras etiquetas):

extended_valid_elements: "img[class|src|alt|title|width|height|loading],a[href|target|title|class],span[class|style]"

Y modifícala para incluir las etiquetas que necesitas. Por ejemplo, para permitir iframe, style y svg (con todos sus atributos):

extended_valid_elements: "img[class|src|alt|title|width|height|loading],a[href|target|title|class],span[class|style],iframe[src|width|height|name|align|class|frameborder|scrolling|id|allowfullscreen],style,svg[*],path[*],g[*]"

Importante: Haz siempre una copia de seguridad del archivo antes de realizar cualquier cambio. Después de modificarlo, asegúrate de que el navegador no esté cargando una versión en caché del archivo JS. Puede que necesites borrar la caché de tu navegador y, si utilizas CCC en tu PrestaShop (Parámetros avanzados > Rendimiento), desactivarlo temporalmente o forzar la recompilación.

miguelpro

¡Muchísimas gracias, @Milo! ¡Esa era exactamente la pista que necesitaba! He modificado el tinymce.inc.js como indicaste, añadiendo iframe, style y svg[*] a extended_valid_elements y ¡funciona perfectamente! Ya puedo guardar mis descripciones con todo el HTML que necesito sin que se borre. Es un alivio no tener que buscar workarounds complicados.

Gracias también a @javierdeco y @fernandodigital por la confirmación y las ideas. ¡Problema resuelto!