Изменить входную высоту TinyMCE с высоты текстовой области - PullRequest
Новая
       18

Изменить входную высоту TinyMCE с высоты текстовой области

3 голосов
/ 23 марта 2012

Моя форма использует входные данные и текстовые области, некоторые из которых я добавил как элементы TinyMCE.Проблема в том, что входные данные преобразуются в тот же размер, что и текстовые области.Я хотел бы, чтобы входные данные имели ту же высоту, что и поля ввода, отличные от TinyMCE (я использую последнюю версию TinyMCE - 3.5b2).

Например, TinyMCE добавляет эту таблицу для входных данных и текстовых областей:

<table role="presentation" id="teaser_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 590px; height: 100px; ">

Как изменить этот встроенный стиль, чтобы уменьшить высоту ввода до 30px?

Я также разместил это на форумах TinyMCE.

1 Ответ

3 голосов
/ 26 марта 2012 
<table role="presentation" id="teaser_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 590px; height: 100px; ">

Это именно тот элемент, который вам нужно будет изменить. Tinymce имеет параметр init ширины и высоты, но в некоторых случаях этого параметра недостаточно. В связи с тем, что редактор iframe явно получает ту же высоту, что и вы, вам придется также настроить iframe. Вам нужно будет позвонить 

var new_val = '30px';

// adjust table element
$('#' + 'my_editorid' + '_tbl').css('height', new_val);

//adjust iframe
$('#' + 'my_editorid' + '_ifr').css('height', new_val);

В идеале, это должно быть сделано прямо при инициализации редактора. Так что используйте: 

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {

        var new_val = '30px';

        // adjust table element
        $('#' + ed.id + '_tbl').css('height', new_val);

        //adjust iframe
        $('#' + ed.id + '_ifr').css('height', new_val);
      });
   }
});

Обновление: Решение без jQuery: 

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {

          var new_val = '30px';

          // adjust table element
          var elem = document.getElementById(ed.id + '_tbl');
          elem.style.height = new_val;

          // adjust iframe element
          var iframe = document.getElementById(ed.id + '_ifr');
          iframe.style.height = new_val;
      });
   }
});
...