Jos*_*osh 5 javascript tinymce
我试图使用CSS将TinyMCE编辑器绝对定位在设定位置.在Chrome中,这很好用.然而,在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>
这是一个针对此测试用例的JSFiddle.将Chrome与Firefox进行比较,请注意firefox中的编辑器显然是如何丢失的......导致这种情况的原因是什么？如何更正？
更新: 我尝试做td相对定位,没有变化:
div.container div.text table tr td {
position: relative;
}
Tim*_*one 10
编辑器在Firefox中 - 它的宽度为零,使其不可见.由于您div.text无论如何都要为包含块定义设置宽度,因此您可以使用该值来显示宽度,div.mceIframeContainer以确保宽度计算在跨浏览器中保持一致.我是在oninit处理程序中完成此操作,但您可以决定在您的情况下哪种方法最好.
显式设置宽度会使编辑器出现,但会在Firefox中暴露出另一个问题,即编辑器的位置高于所需的值.这似乎是由于TinyMCE创建的一些元素,即它插入表格的相对定位的跨度.
我不完全确定为什么它开始时会在一个范围内粘贴一个表,但是在Firefox中观察到的偏移似乎与跨度相对定位和内联元素这一事实有关.应用风格
.defaultSimpleSkin {
display:block;
}
解决了这个问题.您可以查看此jsFiddle示例以查看操作中的更改.