TinyMCE 4 and 100% Height Within Containing Element

Question

I am in the process of migrating from TinyMCE 3 to 4.

However, I am getting stuck at making TinyMCE fill its 100% height container (it does work with TinyMCE 3).

Please note this fiddle: http://jsfiddle.net/MLJaN/

I used the CSS below to try and set the iframe and all of its parents to 100%-height. I agree it does not look ideal, but I would have thought it should work this way.

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

As you can see in the live-fiddle, it is exactly the amount of pixels of the toolbar "too tall": i.e. it is 34px too tall (the toolbar's height).

This works, but it does not automatically resize with the browser and it uses calc() which is only about 79% supported right now: http://jsfiddle.net/MLJaN/2/

Now, I am looking for a pure CSS (no calc() function) solution to make the entire editor fill its container and be fluidly resizable.

Any pointers would be much appreciated.

Guilbert

have you found a solution for this yet? Cause I am trying to do the same? – Cofsky

Answer 1

When you're a hammer, every problem looks like a nail. There's no need for javascript or jquery for this as the tags are there to work with. All that's needed is to adjust the margin on #mcu_31 to adjust for the height of the toolbar and footer. The following sets tinymce to be responsive in its containing element.

/*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;
}

Revised because TinyMCE changes the id's with menu/toolbar additions or deletions. This works no matter what you do with it.

Subglacial

The id for #code_ifr may depend on you textarea name attribute. After changing it to #content_ifr it worked for me. – Oby

does this work any more? tried on latest tinymce 4.3.10 , and centos 7.2 firefox 38.7.0 and it doesn't work any more. status bar is moved to the top and completely blocks the toolbar. – Hautevienne

@mwilcox maybe we don't appreciate being called hammers – Obstruct

Instead of specifying an id like #code_ifr, just reference the iframe itself via .mce-container-body .mce-edit-area iframe to be more generic. Using CSS like this to stretch the height does seem to break client resizing of the editor, though. – Cle

Answer 2

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/

Suspensive

Much neater than the accepted answer - needs to be higher up this list – Built

I also had to include height:"100%", e.g. tinymce.init({..., height:"100%"}), which gets put on the IFRAME, otherwise the IFRAME is not resizing with the container/dialog (tinymce 4.8.3). https://mcmap.net/q/713920/-change-tinymce-editor-39-s-height-dynamically – Thracian

Answer 3

Instead of doing the calcs in the CSS I have moved them into JS. This means that the menubar height will automatically be calculated and doesn't need to be adjusted manually. It also makes this solution compatible with any browser even without css calc() support.

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

But don't just take my word for it.

Try it on jsBin: http://jsbin.com/dibug/2/edit

For good reference I have also create a gist.

Cofsky

Answer 4

For those of you not using jQuery, here's pure javascript code that works:

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;

Upu

Answer 5

For those, who are still struggling with it:

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

If they don't provide an API for that, CSS overriding is the most elegant solution for UI tweaking

Kinematograph

Answer 6

None fixed my problem as good as this one. It's combination of couple answers from the top.

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

And add resize trigger to init :

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

Howzell

Answer 7

In angular fixed by only this ,

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

Awhirl

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

Complot

Answer 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>

Myriapod

Answer 10

I'm fine using CSS calc for the job. This worked for me:

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

Note the valud of 88px represents the combined height of the headerbar and statusbar.

Domella