Question

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

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

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

CHANGE：

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

TO：

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

然后再跑一次。您将看到，由于默认情况下第二个选项卡现在处于打开状态，因此只有该选项卡上的TinyMCE窗口的大小正确。

jsFiddle demo

感谢您的帮助！

Answer 1

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

谷歌搜索后无效，我尝试将内联css放在textarea中，现在它工作正常：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的初始化选项。

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

Answer 3

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

这有点像黑客，但确实很有效

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

3 个答案: