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

Question

我正在从TinyMCE 3迁移到4。

然而，我正在坚持让TinyMCE填充其100％高度的容器（它与TinyMCE 3一起使用）。

我使用下面的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-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/

Answer 3

我没有在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(); });

但不要只听我的话。

在jsBin上尝试：http://jsbin.com/dibug/2/edit

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

Answer 4

对于那些不使用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;

Answer 5

仅在此角度固定的角度，

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

Answer 6

没有解决我的问题和这个问题一样好。它是来自顶部的几个答案的组合。

$(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');
        });
    }
});

Answer 7

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

Answer 8

export const Parent = () => {
  const [value, setValue] = useState("1");
  return (
    <select value={value} onChange={(e) => setValue(e.target.value)}>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  );
};

Answer 9

我很好地使用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的值表示标题栏和状态栏的组合高度。

TinyMCE 4和100％高度内含元素

9 个答案:

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

在jsBin上尝试：http://jsbin.com/dibug/2/edit