Jak mogę poprawić pozycję tego edytora TinyMCE w Firefoksie?

Próbuję całkowicie ustawić edytor TinyMCE w ustawionej pozycji przy użyciu CSS. W Chrome działa to dobrze. W Firefoksie edytor znika. Robię to w złożonym wniosku, ale udało mi się odtworzyć go z bardzo prostego testu:Jak mogę poprawić pozycję tego edytora TinyMCE w Firefoksie?

<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. Porównaj Chrome z Firefoksem, zwróć uwagę na brak edytora w firefoxie ... co jest przyczyną tego i jak mogę to poprawić?

UPDATE:I tried making the td have relative positioning, bez zmian:

div.container div.text table tr td { 
    position: relative; 
}

Źródło

2012-06-15 Josh

Czy naprawdę potrzebujesz css dla 'div.container div.text div.mceIframeContainer'? Działa bez tego stylu i pokazuje ten sam rezultat. I działa w obu przeglądarkach. – Smileek

@Smileek Potrzebuję absolutnie ustawić edytora TinyMCE, w przeciwnym razie na górze '' pojawi się niewielki margines, którego nie mogę pozbyć się. Jeśli chcesz, mogę utworzyć próbkę, aby to wyświetlić. – Josh

Prowadzę dochodzenie w tej sprawie @Smileek, aktualizacje do naśladowania. – Josh

Edytor jest tam w Firefoksie - to właśnie ma szerokość równą zeru, co czyni go niewidzialnym. Ponieważ w każdym razie definiujesz ustawioną szerokość dla bloku zawierającego div.text, możesz użyć tej wartości, aby nadać wyraźną szerokość div.mceIframeContainer, aby zagwarantować, że obliczenia szerokości będą zgodne między przeglądarkami. Zrobiłem to w obsłudze oninit, ale możesz zdecydować, jakie podejście byłoby najlepsze w twoim przypadku.

Ustawienie szerokości jawnie powoduje, że edytor pojawia się, ale wystawia kolejny problem w Firefoksie, w którym edytor jest przesuwany wyżej, niż jest to pożądane. Wydaje się, że spowodowało to powstanie niektórych elementów tworzonych przez TinyMCE, a mianowicie względnie ustawionego zakresu, w który wstawia tabelę.

Nie jestem do końca pewien, dlaczego umieszcza on stolik wewnątrz przęsła na początku, ale przesunięcie obserwowane w Firefoksie jest pozornie związane z tym, że rozpiętość jest zarówno pozycją względnie pozycjonowaną, jak i elementem śródliniowym. Zastosowanie tego stylu rozwiązuje problem. Możesz zobaczyć check out this jsFiddle example, aby zobaczyć zmiany w działaniu.

Źródło

2012-06-15 19:48:56

Dziękuję Tim !!! Jesteś ratownikiem. – Josh

Jak mogę poprawić pozycję tego edytora TinyMCE w Firefoksie?

Odpowiedz

Powiązane problemy