Tiny编辑器inline=true模式下设置默认height无效的技术求助

Inline模式下TinyMCE的height配置项确实不会起作用——这是因为这种模式下编辑器是直接挂载在你指定的DOM元素上（而非用iframe隔离），所以编辑器的高度会直接继承目标元素的样式，而非读取配置里的height值。

给你两个实用的解决方案：

方案一：直接给目标元素设置CSS样式 #

在初始化编辑器之前，给要转为编辑器的DOM元素设置min-height或者height样式就行。比如：

• HTML层面直接设置：

<textarea id="editor" style="min-height: 500px;"></textarea>

• 或者用CSS类统一控制：

.tiny-inline-editor {
  min-height: 500px;
  padding: 10px; /* 可选，优化编辑区域内边距 */
}

然后给元素加上类：<textarea id="editor" class="tiny-inline-editor"></textarea>

方案二：通过TinyMCE的初始化回调动态设置 #

如果需要在编辑器初始化后再调整高度，可以利用setup钩子在初始化完成后修改编辑器内容区域的样式：

tinymce.init({
  selector: '#editor',
  inline: true,
  setup: function(editor) {
    editor.on('init', function() {
      // 获取编辑器的内容主体，设置最小高度
      editor.getBody().style.minHeight = '500px';
    });
  },
  // 其他配置项...
});

为什么原来的配置不生效？ #

TinyMCE的height配置是专门为iframe模式（inline: false）设计的，Inline模式下这个配置会被忽略，因为编辑器没有独立的iframe容器，只能依赖目标元素的样式来控制尺寸。

内容的提问来源于stack exchange，提问作者Rubber