How to automatic resize tinyMCE?

Question

I have a TinyMCE that is set over a TextArea, and I want this editor area to ocuppy all the space of its parent div, all times.

I have a JS function that get the current space and set the textarea.style.height to it, but when I enables TinyMCE it seems to stop working.

Also, the textarea has width: 100%; it doesn't resize by HTML rendering when it's using TinyMCE too.

Any ideas?

Answer 1

The point is that TinyMCE generates an iframe in the place of the textarea, with this ID: originalID+"_ifr", and a table originalID+"_tbl" for holding the controls and the editor area.

To make fluid width:

document.getElementById(id+'_tbl').style.width='100%'

To make fluid height:

Change dinamically document.getElementById(id+'_tbl').style.width to the height you want, through JS.
This is the script I'm using for this:

function toScreenHeight(id, minus) {
    var height;

    if (typeof(window.innerHeight) == "number") //non-IE
     height = window.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) //IE 6+ strict mode
     height = document.documentElement.clientHeight;
    else if (document.body && document.body.clientHeight) //IE 4 compatible / IE quirks mode
     height = document.body.clientHeight;

    document.getElementById(id).style.height = (height - minus) + "px";
}

You can use the code and function calls inside onload and onresize body events.