FirefoxでこのTinyMCEエディタの位置を修正するにはどうすればよいですか？

私は、CSSを使用してTinyMCEエディタを設定位置に配置しようとしています。 Chromeでは、これは問題なく動作します。ただし、Firefoxではエディタが表示されなくなります。私は、複雑なアプリケーションでこれをやっているが、私は非常に単純なテストケースでそれを再現することができました：FirefoxでこのTinyMCEエディタの位置を修正するにはどうすればよいですか？

<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。 ChromeとFirefoxを比較し、Firefoxがどのようにエディタが見逃されているかを確認してください...原因は何ですか？これを修正するにはどうすればよいですか？

UPDATE：I tried making the td have relative positioning、何の変化：

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

出典

2012-06-15 Josh

'div.container div.text div.mceIframeContainer'には本当にCSSが必要ですか？このスタイルなしで動作し、同じ結果を示します。両方のブラウザで動作します。 – Smileek

@Smileek私はTinyMCEエディタを絶対に配置する必要があります。それ以外の場合は、「」の上部に若干のマージンがありますが、私はそれを取り除くことはできません。あなたが好きなら、これを表示するサンプルを作成することができます。 – Josh

私はこれをさらに調査しています@Smileek、続くアップデート。 – Josh

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

明示的に幅を設定すると、エディタが表示されますが、エディタが必要以上にシフトされたFirefoxでは別の問題が発生します。これは、TinyMCEが作成するいくつかの要素、すなわちテーブルを挿入する相対的に位置付けられた範囲に起因するように見えます。

スパンの内側にテーブルを貼り付ける理由は完全にはわかりませんが、Firefoxで見られるオフセットは、スパンが相対的に配置されていることとインライン要素の両方に関係しているようです。スタイルを適用する

.defaultSimpleSkin { 
    display:block; 
}

この問題を修正しました。変更の内容はcheck out this jsFiddle exampleで確認できます。

出典

2012-06-15 19:48:56

ありがとうTim！あなたは命の恩人です。 – Josh

FirefoxでこのTinyMCEエディタの位置を修正するにはどうすればよいですか？

答えて

関連する問題