16

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.

JDR
  • 1,094
  • 1
  • 11
  • 31

10 Answers10

8

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.

  • The id for #code_ifr may depend on you textarea name attribute. After changing it to #content_ifr it worked for me. – velop Mar 09 '16 at 14:42
  • 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. – Shuman Apr 19 '16 at 19:29
  • @mwilcox maybe we don't appreciate being called hammers – chiliNUT Jan 27 '17 at 20:08
  • 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. – icrf Feb 16 '17 at 20:15
8

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/

Community
  • 1
  • 1
Daveman
  • 1,075
  • 9
  • 26
  • 1
    Much neater than the accepted answer - needs to be higher up this list – Steve Greatrex Mar 02 '17 at 17:20
  • 1
    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://stackoverflow.com/a/56428381/1075062 – Etherman Jun 03 '19 at 13:31
4

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.

Paul
  • 1,190
  • 3
  • 12
  • 24
3

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;
Kevin Day
  • 16,067
  • 8
  • 44
  • 68
2

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

Maifee Ul Asad
  • 3,992
  • 6
  • 38
  • 86
1

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');
        });
    }
});
chickens
  • 19,976
  • 6
  • 58
  • 55
0

In angular fixed by only this ,

@Component({
  selector: 'serta-tinymce',
  template: `<textarea **style="min-height:500px"** id="store-description"></textarea>`,
  styles: []
})
Ashutosh Jha
  • 15,451
  • 11
  • 52
  • 85
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;
}
r.enayati
  • 1
  • 3
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>
Maksim Borodov
  • 419
  • 2
  • 7
  • 13
-1

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.

Andrew
  • 2,691
  • 6
  • 31
  • 47