15

我正在从 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（工具栏的高度）。

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

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

任何指针将不胜感激。

4

10 回答 10

8

当你是一把锤子时，每一个问题看起来都像钉子。不需要 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。无论你用它做什么，这都有效。

于 2015-03-26T16:58:35.480 回答
7

I solved this problem with pure CSS by using flex-boxes.

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

This way you don't have to care about the sizes of the menu-bar and other elements.

JSFiddle demo: https://jsfiddle.net/hk5a53d8/

于 2016-10-27T19:17:20.060 回答
4

我没有在 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。

于 2014-05-08T16:29:39.870 回答
3

对于那些不使用 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;
于 2014-11-06T22:24:37.620 回答
1

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

$(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');
        });
    }
});
于 2018-03-18T00:01:08.997 回答
0 
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>
于 2020-11-16T14:59:50.177 回答
0 
#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;
}
于 2018-11-13T10:21:56.253 回答
0

在仅由 this 固定的角度中，

@Component({
  selector: 'serta-tinymce',
  template: `<textarea **style="min-height:500px"** id="store-description"></textarea>`,
  styles: []
})
于 2017-12-15T14:01:07.690 回答
0

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

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

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

于 2021-11-26T05:41:24.543 回答
-1

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

于 2016-02-07T10:46:14.833 回答