How to automatic resize tinyMCE?
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+'_ifr').style.height
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.
Nowadays, you should use the autoresize plugin that comes with tinyMCE. You will have to call tinyMCE like this (jQuery version):
$('.tinymce').tinymce({
theme : 'advanced',
plugins : 'autoresize',
width: '100%',
height: 400,
autoresize_min_height: 400,
autoresize_max_height: 800,
});
I made the experience, that it may be helpful to manually call the resizing in the init_instance_callback
to provide the correct height on init. Add this parameter to the passed options, if you need this:
init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }