Почему мой TinyMCE скрывает текстовую область? - PullRequest
Новая
       9

Почему мой TinyMCE скрывает текстовую область?

9 голосов
/ 26 марта 2009

У меня около 7 textarea с на веб-странице, все они представляют собой текстовые редакторы, использующие TinyMCE. Однако при загрузке страницы виден только 1 из них, а остальные скрыты. Пользователь может щелкнуть ссылку «показать», которая будет отображать оставшиеся текстовые области один за другим.

Однако у меня странная проблема. Все textarea настроены так: 

<textarea cols="40" rows="20"></textarea>

Однако только значение textarea, отображаемое при загрузке страницы, соответствует полному размеру, которым я хочу. Остальные textarea действительно маленькие, когда я их показываю. Поэтому я думаю, что, возможно, они не отображаются, потому что они скрыты при загрузке страницы.

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

Ответы [ 8 ]

7 голосов
/ 26 марта 2009

Попробуйте добавить немного CSS в текстовые области, которые скрыты.

Например, используйте 

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

Мне кажется, я столкнулся с этим, когда CSS TinyMCE переопределяет некоторые из стандартных настроек CSS. В итоге мне пришлось «переопределить» его, и в итоге я отредактировал css-страницы TinyMCE.

6 голосов
/ 14 августа 2009

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

Так как я хотел стилизовать свое поле ввода в CSS, а не в HTML (чёрт), я попробовал 

visibility: hidden;

вместо 

display: none;

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

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

2 голосов
/ 17 сентября 2010

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

1- В текстовой области укажите высоту в атрибуте встроенного стиля: 

<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'});
}
1 голос
/ 20 февраля 2015

Если вы используете рабочую версию TinyMCE, вы, вероятно, забыли скопировать папки, которые нужны для tinymce.min.js. Вам нужно иметь папки langs , plugins , скины и themes в той же папке, что и ваш файл tinymce.min.js.

1 голос
/ 15 июля 2012

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

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

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

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

Попробуйте вызвать tinyMCE.init (...) после того, как раскроете содержимое div.

1 голос
/ 26 марта 2009

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

  • Правильно ли они отображаются, когда вы не скрываете их при загрузке страницы? Это дало бы исчерпывающий ответ на вопрос, в какой момент происходит ошибка.
  • Когда вы переключаете представление текстовой области, можете ли вы одновременно установить атрибуты row / col?
  • Можете ли вы использовать css (возможно, с! Важно), чтобы установить ширину и высоту текстовой области, чем проверить, имеет ли это эффект?
0 голосов
/ 20 ноября 2014

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

Так, например:

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

Вот и все.

...