TinyMCE внутри jQuery UI-tabs не имеет нужного размера в ui-tabs, если не на исходной выбранной вкладке (пример jsFiddle) - PullRequest
Новая
       15

TinyMCE внутри jQuery UI-tabs не имеет нужного размера в ui-tabs, если не на исходной выбранной вкладке (пример jsFiddle)

3 голосов
/ 28 июля 2011

Если TinyMCE находится в jQuery ui-tabs, он будет иметь правильный размер только на 1-й вкладке (или вкладка, выбранная для открытия при создании ui-tabs).На каждой другой вкладке TinyMCE будет иметь только пару строк и будет иметь длину, равную длине панелей инструментов.

Мне не удалось найти какой-либо способ решить эту проблему.

Запустите демонстрационную версию jsFiddle ниже, и вы увидите, что только редактор TinyMCE на вкладке 1 имеет правильный размер.Затем ---

CHANGE:

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

TO: 

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

И запустить снова.Вы увидите, что поскольку вторая вкладка теперь открыта по умолчанию, только размер окна TinyMCE на этой вкладке имеет правильный размер.

jsFiddle demo

Спасибо за любую помощь!

Ответы [ 3 ]

2 голосов
/ 29 марта 2012

У меня похожая проблема с tinyMCE и jQuery.

После поиска в Google безрезультатно, я пытаюсь вставить встроенный 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>

ЯШ: 

$(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'
    });
});​
1 голос
/ 21 января 2012

Основываясь на идее Реу, я сначала разместил элементы div для каждой вкладки вне экрана (например, слева: -3000 пикселей), затем инициализировал экземпляры tinyMCE и добавил параметр oninit: для вызова функции. Затем в этой функции я инициализирую вкладки и возвращаю div в правильное положение.

Это что-то вроде хака, но работает отлично

1 голос
/ 10 августа 2011

Единственный способ решить эту проблему - инициализировать вкладки после инициализации tinymce, добавив: 

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

к опциям инициализации tinymce.

Это не особенно элегантно, потому что пользователь ненадолго видит страницу в состоянии с вкладками, но она работает, и я не смог найти способ динамического изменения размера tinymce.

...