【问题标题】：TinyMCE 4 and 100% Height Within Containing ElementTinyMCE 4 和 100% 包含元素内的高度
【发布时间】：2013-11-20 15:03:02
【问题描述】：

我正在从 TinyMCE 3 迁移到 4。

但是，我无法让 TinyMCE 填充其 100% 高度的容器（它确实适用于 TinyMCE 3）。

请注意这个小提琴：http://jsfiddle.net/MLJaN/

我使用下面的 CSS 尝试将 iframe 及其所有父级设置为 100% 高度。我同意它看起来并不理想，但我认为它应该以这种方式工作。

 body, html, .mce-tinymce, .mce-edit-area.mce-container, iframe, .mce-container-body.mce-stack-layout
 {
     height: 100% !important;
 }

正如您在 live-fiddle 中看到的，它正是工具栏“太高”的像素数量：即它太高了 34px（工具栏的高度）。

这可行，但它不会随浏览器自动调整大小，它使用目前仅支持约 79% 的 calc()：http://jsfiddle.net/MLJaN/2/

现在，我正在寻找一种纯 CSS（无 calc() 函数）解决方案，以使整个编辑器填充其容器并灵活调整大小。

任何指针将不胜感激。

【问题讨论】：

您找到解决方案了吗？因为我也想这样做？

标签： css tinymce height tinymce-4

【解决方案1】：

我没有在 CSS 中进行计算，而是将它们移到了 JS 中。这意味着菜单栏的高度将自动计算，无需手动调整。即使没有 css calc() 支持，它也使该解决方案与任何浏览器兼容。

function resize() {
    setTimeout(function () {
        // Main container
        var max = $('.mce-tinymce')
              .css('border', 'none')
              .parent().outerHeight();

        // Menubar
        max += -$('.mce-menubar.mce-toolbar').outerHeight(); 

        // Toolbar
        max -= $('.mce-toolbar-grp').outerHeight(); 

        // Random fix lawl - why 1px? no one knows
        max -= 1;

        // Set the new height
        $('.mce-edit-area').height(max);
    }, 200); 
} 

$(window).on('resize', function () { resize(); });

但不要只相信我的话。

edit

为了便于参考，我还创建了一个gist。

【讨论】：

【解决方案2】：

对于那些不使用 jQuery 的人，这里有一个可以工作的纯 javascript 代码：

function doresize(){
    var ht = window.innerHeight;
    console.log("ht = " + ht);

    if (document.getElementsByClassName('mce-toolbar-grp')){
        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetHeight;
        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetTop;
        console.log("ht = " + ht);
    }
    if (document.getElementsByClassName('mce-statusbar')){
        ht += -document.getElementsByClassName('mce-statusbar')[0].offsetHeight;
        console.log("ht = " + ht);
    }

    ht += -3; // magic value that changes depending on your html and body margins

    if (document.getElementsByClassName('mce-edit-area')){
        document.getElementsByClassName('mce-edit-area')[0].style.height = ht + "px";
        console.log("ht = " + ht);
    }

}

window.onresize=doresize;
window.onload=doresize;

【讨论】：

【解决方案3】：

当你是一把锤子时，每个问题看起来都像钉子。不需要 javascript 或 jquery，因为标签可以使用。所需要的只是调整#mcu_31 上的边距以调整工具栏和页脚的高度。以下设置 tinymce 在其包含元素中响应。

/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
    min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
    position: absolute;
    top: 69px;
    bottom: 37px;
    left: 0;
    right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

修订是因为 TinyMCE 通过添加或删除菜单/工具栏来更改 id。无论你用它做什么，它都有效。

【讨论】：

#code_ifr 的 id 可能取决于您的文本区域名称属性。将其更改为 #content_ifr 后，它对我有用。
这个还能用吗？尝试了最新的 tinymce 4.3.10 和 centos 7.2 firefox 38.7.0 ，但它不再工作了。状态栏移到顶部，完全挡住了工具栏。
@mwilcox 也许我们不喜欢被称为锤子
不要指定像#code_ifr 这样的id，只需通过.mce-container-body .mce-edit-area iframe 引用iframe 本身就更通用了。不过，使用这样的 CSS 来拉伸高度似乎会破坏客户端调整编辑器的大小。

【解决方案4】：

我可以使用 CSS calc 来完成这项工作。这对我有用：

.mce-tinymce, .mce-edit-area.mce-container, .mce-container-body.mce-stack-layout
{
    height: 100% !important;
}

.mce-edit-area.mce-container {
    height: calc(100% - 88px) !important;
    overflow-y: scroll;
}

注意 88px 的值表示标题栏和状态栏的组合高度。

【讨论】：

【解决方案5】：

我使用 flex-boxes 用纯 CSS 解决了这个问题。

<style>
  #article, .mce-tinymce,.mce-stack-layout, .mce-edit-area{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
   .mce-tinymce iframe{
    flex: 1;
  }
</style>

这样您就不必关心菜单栏和其他元素的大小。

JSFiddle 演示：https://jsfiddle.net/hk5a53d8/

【讨论】：

比公认的答案更简洁 - 需要在这个列表中更高
我还必须包括 height:"100%"，例如tinymce.init({..., height:"100%"})，它会放在 IFRAME 上，否则 IFRAME 不会使用容器/对话框调整大小（tinymce 4.8.3）。 stackoverflow.com/a/56428381/1075062

【解决方案6】：

只有这个固定的角度，

@Component({
  selector: 'serta-tinymce',
  template: `<textarea **style="min-height:500px"** id="store-description"></textarea>`,
  styles: []
})

【讨论】：

【解决方案7】：

没有一个比这个更能解决我的问题。它是来自顶部的几个答案的组合。

$(window).on('resize', function () {
    setTimeout(function () {
        var max = $('.mce-tinymce').css('border', 'none').parent().height();
        max -= $('.mce-menubar.mce-toolbar').outerHeight(); 
        max -= $('.mce-toolbar-grp').outerHeight(); 
        max -= $('.mce-edit-area').outerHeight() - $('.mce-edit-area').height();
        $('.mce-edit-area').height(max);
    }, 100); 
});

并将调整大小触发器添加到 init ：

tinymce.init({
    selector: '#tinymce',
    height: "100%",
    branding: false,
    statusbar: false,
    setup: function (ed) {
        ed.on('init', function(args) {
            $(window).trigger('resize');
        });
    }
});

【讨论】：

【解决方案8】：

#editor-wrapper {
    height: 100%;
}

#editor-wrapper .mce-tinymce.mce-container.mce-panel,
#editor-wrapper .mce-container-body.mce-stack-layout {
    height: 100%;
}

#editor-wrapper .mce-edit-area.mce-container.mce-panel.mce-stack-layout-item {
    height: calc(100% - 75px); /* 75 is tinymce header and footer height*/
}

#editor-wrapper iframe {
    height: 100% !important;
}

【讨论】：

【解决方案9】：

Auto-height for TinyMCE5

    <style>
      /*Container, container body, iframe*/
      .tox-tinymce, .tox-editor-container {
        min-height: 100% !important;
      }

      /*Container body*/
      .tox-sidebar-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }

      /*Editing area*/
      .tox-edit-area {
        position: absolute;
      }

      /*Footer*/
      .tox-tinymce .tox-statusbar {
        position: absolute !important;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>

【讨论】：

【解决方案10】：

对于那些仍在苦苦挣扎的人：

.tox-tinymce{
  height: 100% !important;
}

如果他们不为此提供 API，CSS 覆盖是 UI 调整最优雅的解决方案

【讨论】：