Geek asks and answers

How can I fix this TinyMCE editor in Firefox?

I am trying to completely position the TinyMCE editor at a given position using CSS. On Chrome, this works fine. However, in Firefox, the editor disappears. I do this in a complex application, but I was able to reproduce it with a very simple test case:

<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 example for this test case . Compare Chrome with Firefox, notice how the editor is apparently missing in firefox ... what causes this, and how can I fix it?

UPDATE: I tried to do relative positioningtd , without changes:

div.container div.text table tr td {
    position: relative;
}
+5
source share
1 answer

Firefox - , . div.text, , div.mceIframeContainer, , -. oninit, , .

, Firefox, . -, , TinyMCE, , .

, , , Firefox, , , , .

.defaultSimpleSkin {
    display:block;
}

. jsFiddle, .

+10

More articles:


All Articles