Menu
I am trying to absolutely position a TinyMCE editor at a set position using CSS. In Chrome, this works fine. In Firefox however, the editor disappears. I am doing 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 for this test case. Compare Chrome to Firefox, note how the editor is apparently missing in firefox... what is causing this, and how can I correct this?
UPDATE: I tried making the td have relative positioning, no change:
div.container div.text table tr td {
position: relative;
}
920
How to setContent with multiple editors. Running the setContent() function on specifically editorOne with the tinymce. get('editorOne'). setContent(contentOne); method, you can change just editorOne.
Use tinymce. remove() method to remove TinyMCE editor from the HTML element and again call tinymce. init() on the selector to reinitialize.
Use the getContent() method from the TinyMCE API. Let's say you have initialized the editor on a textarea with id=”myTextarea”. First access the editor using that same id, then call getContent() .
The editor is there in Firefox - it just has a width of zero, making it invisible. Since you're defining a set width for your containing block div.text anyway, you can use that value to give an explicit width to div.mceIframeContainer in order to guarantee that the width calculation will be consistent cross-browser. I did this in an oninit handler, but you can decide what approach would be best in your case.
Setting the width explicitly makes the editor appear, but exposes another issue in Firefox where the editor is shifted higher than desired. This appears to be caused some elements that TinyMCE creates, namely the relatively positioned span that it inserts a table into.
I'm not entirely sure why it sticks a table inside of a span to begin with, but the offset observed in Firefox is seemingly related to the fact that the span is both relatively positioned and an inline element. Applying the style
.defaultSimpleSkin {
display:block;
}
fixes the problem. You can check out this jsFiddle example to see the changes in action.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
