TinyMCE - posición de la barra de herramientas externa

Question

Estoy tratando de trabajar con TinyMCE en la creación de un editor de contenido gráfico de múltiples hojas de texto, haga clic para editar. Tengo TinyMCE al punto en el que puedo agregar y eliminar, colocarlos y clasificarlos, hacer clic para editarlos, etc., pero una cosa me molesta y esa es la barra de herramientas.

Tengo una barra de herramientas externa que estoy tratando de ubicar en el borde inferior de la página, junto con mi botón "Guardar y cerrar" y algunos otros botones de herramientas. La barra de herramientas externa es creada por TinyMCE en un DIV con la clase "mceExternalToolbar". Intenté configurar los atributos position: fixed y left: y top: en la hoja de estilo de la página, pero fue en vano - TinyMCE establece position: absolute y top: -28px en el DIV cuando lo crea.

No puedo modificar el código fuente de TinyMCE debido a restricciones de proyecto, pero puedo complementarlo con archivos CSS adicionales.

¿Alguien puede señalarme en la dirección correcta para colocar la barra de herramientas en la posición correcta?

Answer 1

Los selectores de CSS en las hojas de estilo proporcionadas están anulando los selectores que está escribiendo. Lo que hay que hacer es o bien orientar el elemento de barra de herramientas con un selector de mayor especificidad:

body div.mceExternalToolbar { 
    position: fixed ; 
    top: -28px ; 
}; 

O usar la directiva !important a anularlo:

.mceExternalToolbar { 
    position: fixed !important ; 
    top: -28px !important ; 
} 

Para obtener más detalles acerca de ambos especificidad selector y !important , ver the W3C's documentation.