如果不在初始选定的选项卡上，jQuery UI 选项卡中的 TinyMCE 的大小在 ui 选项卡中的大小不正确（jsFiddle 示例）

Question

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

我一直无法找到任何方法来解决这个问题。

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

更改：

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

TO：

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

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

jsFiddle 演示

感谢您的帮助！

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

Answer 2

我发现解决这个问题的唯一方法是在tinymce初始化后初始化选项卡，方法是添加：

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

到tinymce的初始化选项。

它不是特别优雅，因为用户会短暂地看到处于预选项卡状态的页面，但它确实有效，而且我无法找到使tinymce动态调整大小的方法。

Answer 3

基于 Reu 的想法，我所做的最初是将每个选项卡的 div 放置在远离屏幕的位置（例如，左侧：-3000px），然后初始化tinyMCE 实例并添加 oninit: 参数来调用函数。然后在这个函数中我初始化选项卡并将 div 重新定位回正确的位置。

这有点麻烦，但效果很好