Trabajando con TinyMCE 7 en un entorno complejo de maquetación, nos encontramos con un problema bastante frustrante: los paneles flotantes aparecían completamente desalineados, incluso en el footer de la página.
Después de investigar a fondo, probar múltiples enfoques y descartar soluciones aparentemente válidas, llegamos a una conclusión clara: no es un bug puntual, es una limitación estructural del propio editor.
Qué son los paneles flotantes en TinyMCE
TinyMCE 7 renderiza varios elementos de su interfaz como paneles flotantes:
- El overflow de la toolbar (
...) - El popup contextual de enlaces
- Quick toolbars
Estos elementos no se insertan dentro del editor, sino en un contenedor independiente:
Este contenedor se añade directamente al y todos los paneles usan:
Las coordenadas se calculan en base al editor, pero se aplican respecto al .
El origen del problema
En layouts simples, esto funciona correctamente. Pero en estructuras reales más complejas, empiezan los problemas.
En nuestro caso, el editor estaba:
- Dentro de un layout con sidebar (flexbox)
- En una columna
col-md-6(50% del ancho) - Bastante abajo en la página
Esto genera un desfase importante entre:
- La posición real del editor
- El sistema de coordenadas del
Resultado: los paneles aparecen desplazados cientos de píxeles hacia abajo.
Qué intentamos (y por qué no funcionó)
Probamos prácticamente todo lo razonable:
Ajustes CSS
Modificar z-index o usar position: fixed en .tox-tinymce-aux solo afecta a la capa visual, no a las coordenadas. El problema persiste.
ui_container
TinyMCE permite redefinir dónde se renderizan estos elementos, pero en versiones como 7.8 no se aplica correctamente a todos los casos (especialmente el popup de enlaces).
Manipulación del DOM
Mover el contenedor .tox-tinymce-aux dentro del editor con JavaScript rompe los cálculos internos del propio TinyMCE.
Reposicionamiento manual
Usar getBoundingClientRect() para recalcular la posición funciona… hasta que TinyMCE vuelve a sobrescribirla en el siguiente frame.
Cambios de layout
Incluso sacando el editor a ancho completo, el problema persiste si sigue lejos del top del .
La solución: eliminar los paneles flotantes
La única solución realmente estable fue eliminar completamente el uso de estos paneles.
1. Cambiar el modo de toolbar
Por defecto:
Esto introduce el botón ... con un panel flotante.
La solución:
Ahora la toolbar simplemente ocupa varias líneas. No hay overflow, no hay panel flotante.
2. Sustituir el plugin de enlaces
El plugin link genera un popup contextual que sufre el mismo problema.
Lo que hicimos:
- Eliminar el plugin
link - Crear un botón personalizado
- Usar SweetAlert2 para gestionar el diálogo
SweetAlert2 funciona con:
y un overlay a pantalla completa, por lo que siempre aparece correctamente centrado.
Conclusión
Este comportamiento no es un simple bug, sino una limitación del diseño de TinyMCE 7:
- Calcula posiciones respecto al editor
- Pero renderiza respecto al
Cuando hay un gran desplazamiento entre ambos, el resultado es inevitablemente incorrecto.
No existe una solución limpia vía CSS o JavaScript que lo corrija de forma fiable.
La estrategia más sólida es evitar por completo los paneles flotantes:
toolbar_mode: 'wrap'- Sustituir popups por modales externos como SweetAlert2
Si estás integrando TinyMCE en layouts complejos, esto puede ahorrarte muchas horas de debugging.
