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 ではエディターが明らかに欠落していることに注意してください。これは何が原因で、どうすれば修正できますか?

更新: have relative positionを作成しようとしましたtdが、変更はありません:

div.container div.text table tr td {
    position: relative;
}
4

1 に答える 1

10

エディタは Firefox にあります - 幅が 0 であるため、表示されません。とにかく、包含ブロックの設定幅を定義しているので、div.textその値を使用して明示的な幅を指定div.mceIframeContainerし、幅の計算がブラウザー間で一貫していることを保証できます。私はoninitハンドラーでこれを行いましたが、あなたの場合にどのアプローチが最適かを決めることができます。

幅を明示的に設定するとエディターが表示されますが、Firefox で別の問題が発生し、エディターが必要以上に高く移動します。これは、TinyMCE が作成するいくつかの要素、つまりテーブルを挿入する相対的に配置されたスパンが原因のようです。

そもそもテーブルをスパンの内側に固定する理由は完全にはわかりませんが、Firefox で観察されるオフセットは、スパンが相対的に配置され、インライン要素であるという事実に関連しているようです。スタイルの適用

.defaultSimpleSkin {
    display:block;
}

問題を修正します。この jsFiddle の例をチェックアウトして、実際の変更を確認できます。

于 2012-06-15T19:48:56.193 に答える