admin管理员组文章数量:1355731
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 plex 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;
}
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 plex 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;
}
-
Do you really need css for
div.container div.text div.mceIframeContainer? It works without this style and shows the same result. And it works in both browsers. – Smileek Commented Jun 15, 2012 at 16:36 -
@Smileek I need to absolutely positioning the TinyMCE editor, otherwise there is a slight margin at the top of the
<td>which I can't seem to get rid of. If you like, I can create a sample to display this. – Josh Commented Jun 15, 2012 at 16:41 - I am investigating this further @Smileek, updates to follow. – Josh Commented Jun 15, 2012 at 16:45
- I supposed that it is something else in real case - just wanted to make it clear. So, the simplest solution didn't work. :) – Smileek Commented Jun 15, 2012 at 16:52
1 Answer
Reset to default 10The 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.
本文标签： javascriptHow can I correct the position of this TinyMCE editor in FirefoxStack Overflow
版权声明：本文标题：javascript - How can I correct the position of this TinyMCE editor in Firefox? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743992311a2572369.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论