TinyMCE 4和100%高度内含元素

Question

我正在从TinyMCE 3迁移到4.

但是,我正在坚持让TinyMCE填充其100%高度的容器(它确实适用于TinyMCE 3).

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

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

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

正如您在实况小提琴中看到的那样,正好是工具栏的像素数量"太高":即它太高(工具栏的高度)是34px.

这有效,但它不会自动调整浏览器大小,它使用的calc()现在只支持79%左右:http://jsfiddle.net/MLJaN/2/

现在,我正在寻找一个纯CSS(无calc()函数)解决方案,使整个编辑器填充其容器并可流畅地调整大小.

任何指针都将非常感激.

Answer 1

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

/*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.无论你用它做什么,这都有效.

Answer 2

我使用flex-box用纯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/