5
Estoy intentando posicionar absolutamente un editor TinyMCE en una posición establecida usando CSS. En Chrome, esto funciona bien. Sin embargo, en Firefox, el editor desaparece. Estoy haciendo esto en una aplicación compleja, pero yo era capaz de reproducirla con un caso de prueba muy simple:¿Cómo puedo corregir la posición de este editor de TinyMCE en Firefox?
<style type='text/css'>
div.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
min-height: 600px;
}
div.container div.text {
border: 1px dashed black;
overflow: hidden;
}
div.container div.text div.mceIframeContainer {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type='text/javascript'>//<![CDATA[
Event.observe(window, "load", function(){
function setup()
{
var myTinyMCESettings = {
mode: 'none',
width: '100%',
height: '9000px',
body_class: 'TypeRegion'
};
var editorId = $(document.body).down('div.container div.text div.editor').identify();
tinyMCE.init(myTinyMCESettings);
tinyMCE.execCommand("mceAddControl", true, editorId);
}
setup();
});//]]>
</script>
</head>
<body>
<div class="container">
<div class="text" style="position:absolute;top: 2in; left:2in; width: 2in; height: 3in;">
<div class="editor">Enter text here</div>
</div>
</div>
Here is a JSFiddle for this test case. Compare Chrome con Firefox, observe cómo el editor aparentemente falta en Firefox ... ¿Qué está causando esto, y cómo puedo corregir esto?
ACTUALIZACIÓN:I tried making the td
have relative positioning, ningún cambio:
div.container div.text table tr td {
position: relative;
}
¿Realmente necesita css para 'div.container div.text div.mceIframeContainer'? Funciona sin este estilo y muestra el mismo resultado. Y funciona en ambos navegadores. – Smileek
@Smileek Necesito posicionar completamente el editor TinyMCE, de lo contrario hay un pequeño margen en la parte superior del '
Estoy investigando esto aún más @Smileek, actualizaciones a seguir. – Josh
Respuesta
El editor está ahí en Firefox - sólo tiene una anchura de cero, por lo que es invisible. Ya que está definiendo un ancho establecido para su bloque contenedor
div.text
de todos modos, puede usar ese valor para dar un ancho explícito adiv.mceIframeContainer
para garantizar que el cálculo del ancho sea consistente entre navegadores. Hice esto en un controladoroninit
, pero puede decidir qué enfoque sería el mejor en su caso.Configurar el ancho explícitamente hace que el editor aparezca, pero expone otro problema en Firefox donde el editor se desplaza más alto de lo deseado. Esto parece ser causado por algunos elementos que TinyMCE crea, es decir, el tramo relativamente posicionado en el que inserta una tabla.
No estoy del todo seguro de por qué pega una tabla dentro de un tramo, pero el desplazamiento observado en Firefox está aparentemente relacionado con el hecho de que el tramo está relativamente posicionado y es un elemento en línea. Aplicando el estilo
soluciona el problema. Puede check out this jsFiddle example para ver los cambios en acción.
Fuente
2012-06-15 19:48:56
Gracias Tim !!! Eres un salvavidas. – Josh
Cuestiones relacionadas