[Feature request] Allow TinyMCE to fill parent container - 100% height

Do you want to request a feature or report a bug? feature What is the current behavior? currently we can specify height of TinyMCE as number, but there isn’t any easy way to set height to 100% **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.

What is the expected behavior? I’d like to be able to specify that TinyMCE should fill it’s parent container. If it is inside div then it should fill div, if inside body then entire body. Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE? 4.5.5 Chrome 57 Win10x64

There are many questions related to this issue, for example https://community.tinymce.com/communityQuestion?id=90661000000MrXkAAK http://stackoverflow.com/questions/9588025/change-tinymce-editors-height-dynamically http://stackoverflow.com/questions/19861838/tinymce-4-and-100-height-within-containing-element#

and some partly solutions: https://gist.github.com/xypaul/efae27e0d0093d0746c3

but they aren’t working perfectly, In my case my custom sidebar isn’t displayed correctly.

It would be awesome if You guys could allow this behavior, simply by adding an extra option (fill_container, default false) for it or allow us to specify height as percentage value.

When using resize we can resize editor, so maybe same code can be used, but instead of user selected height it can use height of parent container?

When looking at content using Chrome Developer tools we can see that the when resizing editor only this that is changing is height of iframe with classes mce-edit-area mce-container mce-panel mce-stack-layout-item mce-first. Maybe this can be calculated on init and on page resize?

[Misiu]

I’ve created plugin for this:

tinymce.PluginManager.add('autoheight', function(editor) {

  var editor_container;
  var bars_height = 0;

  function resizeEditor(e) {
    if (typeof(editor_container) === 'undefined') return;

    try {
      var element_height = parseInt(window.getComputedStyle(editor_container).height);
      /*calculate bar height only once*/
      if (bars_height === 0) {
        var toolbars = editor_container.querySelectorAll('.mce-toolbar, .mce-statusbar, .mce-menubar');
        /*IE11 FIX*/
        var toolbarsLength = toolbars.length;
        for (var i = 0; i < toolbarsLength; i++) {
          var toolbar = toolbars[i];
          /*skip sidebar*/
          if (!toolbar.classList.contains('mce-sidebar-toolbar')) {
            var bar_height = parseInt(window.getComputedStyle(toolbar).height);
            bars_height += bar_height;
          }
        }
      }
      /*the extra 8 is for margin added between the toolbars*/
      new_height = element_height - bars_height - 8;
      editor.theme.resizeTo('100%', new_height);
    } catch (err) {
      console.log(err);
    }
  }
  editor.on('ResizeWindow', resizeEditor);
  editor.on("init", function() {
    try {
      editor_container = editor.getContainer().parentNode;
    } catch (e) {
    }
    setTimeout(function() {
      resizeEditor();
    }, 0);
  });
});

Demo is available here: https://codepen.io/Misiu/pen/EWEVPo

I’ll create repository for this if this can’t be added to core.

[Misiu]

@spocke any updates? 😃