¿Cómo puedo corregir la posición de este editor de TinyMCE en Firefox?

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; 
}

Fuente

2012-06-15 Josh

¿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 '' del cual parece que no puedo deshacerme. Si lo desea, puedo crear una muestra para mostrar esto. – Josh

Estoy investigando esto aún más @Smileek, actualizaciones a seguir. – Josh

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 a div.mceIframeContainer para garantizar que el cálculo del ancho sea consistente entre navegadores. Hice esto en un controlador oninit, 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

.defaultSimpleSkin { 
    display:block; 
}

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

¿Cómo puedo corregir la posición de este editor de TinyMCE en Firefox?

Respuesta

Cuestiones relacionadas