Maximizing the height of TinyMCE 4 within a containing element

Question

Maximizing the height of TinyMCE 4 within a containing element

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

However, I am encountering difficulties when trying to get TinyMCE to fill its container with 100% height (which was working fine with TinyMCE 3).

Please refer to this fiddle: http://jsfiddle.net/MLJaN/

In an attempt to set the iframe and all its parent elements to 100% height, I utilized the following CSS code. Though not ideal visually, I expected it to work:

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

As observed in the live fiddle, the editor is exactly 34px taller than it should be, which corresponds to the toolbar's height.

The solution provided does function, however, it lacks automatic resizing with the browser and relies on calc(), which has limited support at approximately 79%: http://jsfiddle.net/MLJaN/2/

I am now seeking a pure CSS solution (without using calc() function) to ensure that the entire editor fills its container and can fluidly resize.

Any guidance on achieving this would be greatly appreciated.

css tinymce height tinymce-4

Answer 1

Answer №1

Being a hammer can make every problem seem like a nail. There's no need for complicated javascript or jquery here; the tags are designed to do the work for you. All that's required is adjusting the margin on #mcu_31 to account for the height of the toolbar and footer. The code below ensures that TinyMCE is responsive within 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;
}

This revision accounts for changes in id's due to additions or deletions of menus/toolbars in TinyMCE. It remains effective regardless of modifications made to it.

Answer 2

Being a hammer can make every problem seem like a nail. There's no need for complicated javascript or jquery here; the tags are designed to do the work for you. All that's required is adjusting the margin on #mcu_31 to account for the height of the toolbar and footer. The code below ensures that TinyMCE is responsive within 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;
}

This revision accounts for changes in id's due to additions or deletions of menus/toolbars in TinyMCE. It remains effective regardless of modifications made to it.

Answer 3

Answer №2

Utilizing the power of CSS, I successfully tackled this issue by implementing flex-boxes.

<style>
  #main-content, .section-container,.grid-layout, .content-area{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
   .section-container iframe{
    flex: 1;
  }
</style>

By doing so, you eliminate the need to worry about adjusting the dimensions of various elements like the menu-bar.

Check out my JSFiddle demonstration here: https://jsfiddle.net/td3r8j6v/

Answer 4

Utilizing the power of CSS, I successfully tackled this issue by implementing flex-boxes.

<style>
  #main-content, .section-container,.grid-layout, .content-area{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
   .section-container iframe{
    flex: 1;
  }
</style>

By doing so, you eliminate the need to worry about adjusting the dimensions of various elements like the menu-bar.

Check out my JSFiddle demonstration here: https://jsfiddle.net/td3r8j6v/

Answer 5

Answer №3

Moving the calculations from CSS to JavaScript has streamlined the process. This eliminates the need for manual adjustments to the menubar height and ensures compatibility with all browsers, regardless of 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(); });

Experience it yourself!

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

For further information, check out this gist.

Answer 6

Moving the calculations from CSS to JavaScript has streamlined the process. This eliminates the need for manual adjustments to the menubar height and ensures compatibility with all browsers, regardless of 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(); });

Experience it yourself!

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

For further information, check out this gist.

Answer 7

Answer №4

For those of you who prefer vanilla JavaScript over jQuery, below is a snippet of code that achieves the same functionality:

function customResize(){
    var height = window.innerHeight;
    console.log("height = " + height);

    if (document.getElementsByClassName('mce-toolbar-grp')){
        height -= document.getElementsByClassName('mce-toolbar-grp')[0].offsetHeight;
        height -= document.getElementsByClassName('mce-toolbar-grp')[0].offsetTop;
        console.log("height = " + height);
    }
    if (document.getElementsByClassName('mce-statusbar')){
        height -= document.getElementsByClassName('mce-statusbar')[0].offsetHeight;
        console.log("height = " + height);
    }

    height -= 3; // Adjust this value based on your HTML and body margins

    if (document.getElementsByClassName('mce-edit-area')){
        document.getElementsByClassName('mce-edit-area')[0].style.height = height + "px";
        console.log("height = " + height);
    }

}

window.onresize = customResize;
window.onload = customResize;

Answer 8

For those of you who prefer vanilla JavaScript over jQuery, below is a snippet of code that achieves the same functionality:

function customResize(){
    var height = window.innerHeight;
    console.log("height = " + height);

    if (document.getElementsByClassName('mce-toolbar-grp')){
        height -= document.getElementsByClassName('mce-toolbar-grp')[0].offsetHeight;
        height -= document.getElementsByClassName('mce-toolbar-grp')[0].offsetTop;
        console.log("height = " + height);
    }
    if (document.getElementsByClassName('mce-statusbar')){
        height -= document.getElementsByClassName('mce-statusbar')[0].offsetHeight;
        console.log("height = " + height);
    }

    height -= 3; // Adjust this value based on your HTML and body margins

    if (document.getElementsByClassName('mce-edit-area')){
        document.getElementsByClassName('mce-edit-area')[0].style.height = height + "px";
        console.log("height = " + height);
    }

}

window.onresize = customResize;
window.onload = customResize;

Answer 9

Answer №5

Need some help with this issue? Here's a tip:

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

When an API is not available, using CSS to override styles is a sophisticated way to customize your UI

Answer 10

Need some help with this issue? Here's a tip:

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

When an API is not available, using CSS to override styles is a sophisticated way to customize your UI

Answer 11

Answer №6

This solution proved to be the most effective in solving my problem. It combines elements from various top answers.

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

To ensure proper initialization, add a resize trigger:

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

Answer 12

This solution proved to be the most effective in solving my problem. It combines elements from various top answers.

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

To ensure proper initialization, add a resize trigger:

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

Answer 13

Answer №7

With Angular, the solution is to address this particular issue by applying the following method:

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

Answer 14

With Angular, the solution is to address this particular issue by applying the following method:

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

Answer 15

Answer №8

#editor-wrapper {
    max-height: 100%;
}

#editor-wrapper .mce-tinymce.mce-container.mce-panel,
#editor-wrapper .mce-container-body.mce-stack-layout {
    max-height: 100%;
}

#editor-wrapper .mce-edit-area.mce-container.mce-panel.mce-stack-layout-item {
    max-height: calc(100% - 75px); /* 75 represents the height of the tinymce header and footer */
}

#editor-wrapper iframe {
    max-height: 100% !important;
}

Answer 16

#editor-wrapper {
    max-height: 100%;
}

#editor-wrapper .mce-tinymce.mce-container.mce-panel,
#editor-wrapper .mce-container-body.mce-stack-layout {
    max-height: 100%;
}

#editor-wrapper .mce-edit-area.mce-container.mce-panel.mce-stack-layout-item {
    max-height: calc(100% - 75px); /* 75 represents the height of the tinymce header and footer */
}

#editor-wrapper iframe {
    max-height: 100% !important;
}

Answer 17

Answer №9

How to Automatically Adjust Height for TinyMCE5

    <style>
      /*Adjusting the height of different elements in TinyMCE editor*/
      .tox-tinymce, .tox-editor-container {
        min-height: 100% !important;
      }

      /*Positioning the sidebar at the bottom*/
      .tox-sidebar-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }

      /*Positioning the editing area*/
      .tox-edit-area {
        position: absolute;
      }

      /*Positioning the footer/status bar*/
      .tox-tinymce .tox-statusbar {
        position: absolute !important;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>

Answer 18

How to Automatically Adjust Height for TinyMCE5

    <style>
      /*Adjusting the height of different elements in TinyMCE editor*/
      .tox-tinymce, .tox-editor-container {
        min-height: 100% !important;
      }

      /*Positioning the sidebar at the bottom*/
      .tox-sidebar-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }

      /*Positioning the editing area*/
      .tox-edit-area {
        position: absolute;
      }

      /*Positioning the footer/status bar*/
      .tox-tinymce .tox-statusbar {
        position: absolute !important;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>

Answer 19

Answer №10

Utilizing CSS calc for this task is my preferred method. Here's the solution that worked effectively:

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

It's important to note that the value of 88px accounts for the total height of the headerbar and statusbar.

Answer 20

Utilizing CSS calc for this task is my preferred method. Here's the solution that worked effectively:

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

It's important to note that the value of 88px accounts for the total height of the headerbar and statusbar.

Maximizing the height of TinyMCE 4 within a containing element

Answer №1

Answer №2

Check out my JSFiddle demonstration here: https://jsfiddle.net/td3r8j6v/

Answer №3

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

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Similar questions

Jquery animation in Wordpress without any need for scrolling

Is there a way to refresh a Thymeleaf table without reloading the entire page?

Applying CSS Styles to a Single Class Only

Modify the styling of the Checkbox within the script template

Why won't my Bootstrap carousel slide properly?

Can we specify the inherit value for font family on an element to ensure consistent style when the specified font is not available?

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

Exploring the functions of Safari input types: search, reset, and normalize

Tips for utilizing z-index effectively in conjunction with a sticky header

The image displayed on the HTML scrset attribute is not the correct one

Creating a container that scrolls horizontally

The slider causing conflicts with widgets and content positioned below it in an HTML layout

Setting a fixed time for a preloader is a simple and effective way to

Tips for dynamically adding a class when a specific section is scrolled to, and removing it when the section is passed

Resize a div within another div using overflow scroll and centering techniques

Mysterious Chrome glitch causes SVG element to shift down by 2 pixels

What is the best way to position my NavBar items to the right using the Bootstrap v5.2 framework?

Calculating the Vertical Size of a Component within Django Template Design

Why does my 'click' event listener only work for the first two <li>'s and not the others?

Unable to insert additional lines into diamond shape generated solely with CSS