从 textarea 高度更改 TinyMCE 输入高度

Posted 2023-05-07

【中文标题】从 textarea 高度更改 TinyMCE 输入高度

【英文标题】：Change TinyMCE input height from textarea height

【发布时间】：2012-04-08 08:49:44

【问题描述】：

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

例如，TinyMCE 将此表添加到输入和文本区域：

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

如何更改此嵌入样式以将输入的高度降低到 30 像素？

我也在 TinyMCE 论坛上posted this。

【参考方案1】：

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

【讨论】：

嗯，我似乎无法正常工作（两个字段的高度仍然相同）。我使用了新的 TinyMCE 下载中的示例页面：bit.ly/GS6FBK

hmmm，与我的页面完美配合 - 哎呀发现了一个错误并更改了代码 - 现在检查它（使用 onClick 而不是 onInit）

我使用了更新后的代码，现在 textarea 没有 TinyMCE，输入也没有 30px 高。难道我做错了什么？ bit.ly/GS6FBK

你有什么错误吗？ （您是否使用错误控制台（即萤火虫））

我看不到任何错误。您可以在此处查看该页面：bit.ly/GS6FBK。你有这个工作的演示网址吗？