TinyMCE内のjQuery UIタブは、最初に選択したタブ（jsFiddleの例）にない場合、ui-tab内でサイズが正しくありません

Question

TinyMCEがjQuery ui-tabsにある場合、タブが作成されたときに開くように選択されたタブ）。他のすべてのタブでは、TinyMCEには2行しかなく、ツールバーと同じ長さになります。

私はこれを解決する方法を見つけ出すことができませんでした。

以下のjsFiddleデモでそれを実行すると、タブ1のTinyMCEエディタだけが適切にサイズ調整されていることがわかります。その後---

CHANGE：

$('#tabs').tabs('select', 0);

TO：

$('#tabs').tabs('select', 1); 

そして、再び実行します。 2番目のタブがデフォルトで開いているので、そのタブのTinyMCEウィンドウのみが適切にサイズ調整されていることがわかります。任意の助け

jsFiddle demo

ありがとう！

Answer 1

私はこの問題を解決するために見つけた唯一の方法は、TinyMCEを初期化した後、追加することで、タブを初期化することです：TinyMCEのの初期化オプションに

oninit : function(){ 
    $("#tabs").tabs(); 
}, 

。

ユーザーが一時的にページをタブで表示している状態になっていることがわかりますが、正常に機能していて、動的にサイズを変更する方法が見つからないため、あまり優雅ではありません。

Answer 2

Reuのアイデアを基にして、私は最初に画面から各タブのdivの位置を決め（たとえば、左：-3000px）、tinyMCEインスタンスを初期化し、oninit：パラメータを追加して関数を呼び出します。次に、この関数では、タブを初期化し、divを正しい位置に戻します。

それはハッキングのビットだが、それは完全に

Answer 3

私はTinyMCEをとjQueryを使って同様の問題を持って働くありません。

無駄にグーグルの後、私はテキストエリアにインラインCSSを配置しようと、今、それが正常に動作します：ここにjsFiddle または 上のD

試みは私のsnipetです：

CSS：

.editor { width: 450px; } 

HTML：

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Tab1</a></li> 
     <li><a href="#tabs-2">Tab2</a></li> 
     <li><a href="#tabs-3">Tab3</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <textarea class="editor" style="width: 450px"></textarea> 
    </div> 
    <div id="tabs-2"> 
     <textarea class="editor" style="width: 450px"></textarea> 
    </div> 
    <div id="tabs-3"> 
     <textarea class="editor" style="width: 450px"></textarea> 
    </div> 
</div> 

js：

$(document).ready(function() { 
    $('#tabs').tabs(); 
    $('#tabs').tabs('select', 1); 
    $('textarea').tinymce({ 
     script_url: 'http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/tiny_mce.js' 
    }); 
});​