Почему мой TinyMCE скрытый textarea действует?

у меня около 7 textareas на веб-странице, все они являются редакторами rich text с помощью TinyMCE. Однако при загрузке страницы виден только 1 из них, а остальные скрыты. Пользователь может щелкнуть ссылку "Показать", которая будет отображать оставшиеся текстовые области один за другим.

тем не менее, у меня странная проблема. Все textareas настроены следующим образом:

<textarea cols="40" rows="20"></textarea>
, только textarea отображается при загрузке страницы в полном размере, который я хочу. Остальные textareas очень маленькие, когда я им показываю. Поэтому я думаю, что, возможно, они не отображаются, потому что они скрыты при загрузке страницы.

как я могу исправить это?

9
dhtml dom javascript tinymce

8 ответов

попробуйте добавить CSS в скрытые текстовые области.

например, использовать

<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea>

Я думаю, что я столкнулся с этим, где CSS TinyMCE переопределяет некоторые из поведения CSS по умолчанию. В итоге мне пришлось "переопределить" его и в конечном итоге отредактировать css-страницы TinyMCE.

7

Я думаю, что это ошибка MCE или, по крайней мере, функция, которой не хватает MCE.

Так как я хотел стиль моего поля ввода в CSS, а не в HTML (yuck), я попытался

visibility: hidden;

вместо

display: none;

и все снова работало.

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

6

при загрузке TinyMCE с помощью jQuery эта проблема может быть решена следующим образом:

1-в текстовом поле укажите высоту в атрибуте inline style:

<textarea style="height:200px;" class="tinymce" name="myfield"></textarea>

2-добавление функции обратного вызова при создании экземпляра редактора TinyMCE. например,tinymceLoaded

$('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : 'PATH_TO_TINYMCE.js',

    // General options ...
    // Theme options...

    // callback function
    init_instance_callback : "tinymceLoaded"
});

3-Установите высоту ваших редакторов в функции tinymceLoaded:

function tinymceLoaded(inst){
    // get the desired height of the editor
    var height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0
    // Lets use the inline style text to solve this problem
    if(height == 0){
        height = $('#' + inst.editorId).css('height'); // 200px
        height = height.replace(/[^0-9]/g, "");    // remove all non-numeric characters to isolate the '200'
    }

    // set the height of the hidden TinyMCE editor
    $('#' + inst.editorId + '_ifr').css({height: height + 'px'});
}
2

Не имея несколько больше информации о вашей фактической настройке и как вы делаете vaious дисплей/скрыть функциональность трудно дать окончательный ответ. Я могу выбросить несколько общих мыслей, хотя:

  • правильно ли они отображаются, когда вы не скрываете их при загрузке страницы? Это дало бы определительный ответ на то, в какой момент происходит ошибка.
  • при переключении представления textarea вы можете explicity установить атрибуты строки/col в то же время время?
  • можете ли вы использовать css (возможно, с !важно) установить ширину и высоту textarea, чем проверить, имеет ли это эффект?
1

с TinyMCE внутри скрытого div не отображаются как включено, когда мы помещаем div видимым, slolife ответ помог мне:

попробуйте позвонить в tinyMCE.инициализация.(..) после отображения содержащего div.

1

у меня была та же проблема, когда высота скрытых элементов управления textarea, которые были преобразованы в Редакторы TinyMCE, была слишком маленькой. Настройка visibility to none работал, но оставляет большое пустое пространство на своем месте.

следующее решение работало хорошо для меня:

  • не скрывайте элементы управления textarea изначально при загрузке страницы
  • вместо этого установите всю конфигурацию init вашего TinyMCE следующим образом:
tinyMCE.init({
        ...
        init_instance_callback : "onInstanceInit"
});
  • In ваш onInstanceInit функция, Скрыть инициализированный редактор TinyMCE динамически
  • если вы покажете этот редактор после этого, высота будет нормальной снова так же, как она никогда не была скрыта
1

другой причиной скрытой вещи является удаление элементов из dom с инициализацией tinymce на них. Сначала вам нужно удалить tinymce из этого элемента, чтобы избежать странного поведения при инициализации новых элементов tinymce.

вот например :

removeElementWithTinymce = function(elementToRemove){ var parent = elementToRemove.parentNode; tinymce.remove(elementToRemove.getAttribute('id')); parent.removeChild(elementToRemove); };

вот и все.

0

Если вы используете производственную версию TinyMCE, вы, вероятно, забыли скопировать папки, которые tinymce.минута.js нуждается. У вас должны быть папки Лэнг, Плагины, скины и темы в той же папке, что и ваш tinymce.минута.файл js.

0