5

我正在尝试使用 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;
}
4

1 回答 1

10

编辑器在 Firefox 中 - 它的宽度为零，使其不可见。由于无论如何您都在为包含块定义设置宽度div.text，因此您可以使用该值来给出明确的宽度，div.mceIframeContainer以保证宽度计算在跨浏览器中是一致的。我在oninit处理程序中执行此操作，但您可以决定哪种方法最适合您的情况。

显式设置宽度会使编辑器出现，但会暴露 Firefox 中的另一个问题，即编辑器的移动位置高于预期。这似乎是由 TinyMCE 创建的一些元素引起的，即它插入表格的相对定位跨度。

我不完全确定为什么它将表格粘贴在 span 中，但在 Firefox 中观察到的偏移量似乎与 span 既是相对定位又是内联元素的事实有关。应用样式

.defaultSimpleSkin {
    display:block;
}

解决问题。您可以查看此 jsFiddle 示例以查看实际更改。

于 2012-06-15T19:48:56.193 回答