从textarea高度更改TinyMCE输入高度

时间:2012-03-23 19:15:41

标签: input tinymce textarea height

我的表单使用输入和textareas,其中一些我已添加为TinyMCE元素。问题是输入被转换为与textareas相同的大小。我希望输入与非TinyMCE输入字段的高度相同(我使用的是最新版本的TinyMCE - 3.5b2)。

例如,TinyMCE将此表添加到输入和textareas:

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

如何更改此嵌入式样式以将输入的高度降低到30px?

我在TinyMCE论坛上也posted this

1 个答案:

答案 0 :(得分:3)

<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;
      });
   }
});