jquery-ui - 如果不在初始选择的选项卡上，jQuery UI 选项卡中的 TinyMCE 的大小在 ui 选项卡中的大小不正确(jsFiddle 示例)

Question

如果 TinyMCE 在 jQuery ui-tabs 中，则只有在第一个选项卡(或创建 ui-tabs 时选择打开的选项卡)中，它才会正确调整大小。在每个其他选项卡上，TinyMCE 将只有几行，并且与工具栏一样长。

我还没找到解决这个问题的方法。

在下面的 jsFiddle 演示中，运行它，您将看到只有选项卡 1 上的 TinyMCE 编辑器大小正确。然后——

更改:

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

致:

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

然后，再次运行。您将看到，由于第二个选项卡现在默认打开，因此只有该选项卡上的 TinyMCE 窗口大小正确。

jsFiddle demo

感谢您的帮助!

Answer 1

我对tinyMCE和jQuery也有类似的问题。

谷歌搜索无济于事后，我尝试将内联CSS放入文本区域，现在它工作正常:D

试穿jsFiddle或者这是我的片段:

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'
    });
});​