From Moxiecode Documentation Wiki

Contents 1 Auto Resize Editor Box 1.1 Set init_instance_callback to our function 1.2 The resizing function 1.3 Auto Resize To Fit Content

Auto Resize Editor Box

This page shows how to resize the editor box to the browser window's available height (and width).

Set init_instance_callback to our function

We want TinyMCE execute our resizing function after the page has fully loaded. This is why we need to use TinyMCE's init_instance_callback option. Since the function we are going to use is called "resizeEditorBox" we need to set the option accordingly:

tinyMCE.init({
    mode : '...',
    ...,
    init_instance_callback : 'resizeEditorBox'
});

The resizing function

resizeEditorBox = function (editor) {
    // Have this function executed via TinyMCE's init_instance_callback option!
    // requires TinyMCE3.x
    var container = editor.contentAreaContainer, /* new in TinyMCE3.x -
        for TinyMCE2.x you need to retrieve the element differently! */
        formObj = document.forms[0], // this might need some adaptation to your site
        dimensions = {
            x: 0,
            y: 0,
            maxX: 0,
            maxY: 0
        }, doc, docFrame;

    dimensions.x = formObj.offsetLeft; // get left space in front of editor
    dimensions.y = formObj.offsetTop; // get top space in front of editor

    dimensions.x += formObj.offsetWidth; // add horizontal space used by editor
    dimensions.y += formObj.offsetHeight; // add vertical space used by editor

    // get available width and height
    if (window.innerHeight) {
        dimensions.maxX = window.innerWidth;
        dimensions.maxY = window.innerHeight;
    } else {
		// check if IE for CSS1 compatible mode
        doc = (document.compatMode && document.compatMode == "CSS1Compat")
            ? document.documentElement
            : document.body || null;
        dimensions.maxX = doc.offsetWidth - 4;
        dimensions.maxY = doc.offsetHeight - 4;
    }

    // extend container by the difference between available width/height and used width/height
    docFrame = container.children [0] // doesn't seem right : was .style.height;
    docFrame.style.width = container.style.width = (container.offsetWidth + dimensions.maxX - dimensions.x - 2) + "px";
    docFrame.style.height = container.style.height = (container.offsetHeight + dimensions.maxY - dimensions.y - 2) + "px";
}

Auto Resize To Fit Content

function adjustMceHeight(editorID) {
	var frame, doc, docHeight, frameHeight;
	
	frame = document.getElementById(editorID+"_ifr");
	if ( frame != null ) {
		//get the document object
		if (frame.contentDocument) { 
			doc = frame.contentDocument; 
		} else if (frame.contentWindow) { 
			doc = frame.contentWindow.document; 
		} else if (frame.document) { 
			doc = frame.document; 
		}
		
		if ( doc == null )
			return;
		
		//prevent the scrollbar from showing
		doc.body.style.overflow = "hidden";
	
		docHeight;
		frameHeight = parseInt(frame.style.height);
		
		//Firefox
		if ( doc.height ) { docHeight = doc.height; }
		//MSIE
		else { docHeight = parseInt(doc.body.scrollHeight); }
		
		//MAKE BIGGER
		if ( docHeight > frameHeight-20 ) { frame.style.height = (docHeight+20) + "px"; }
		//MAKE SMALLER
		else if ( docHeight < frameHeight-20 ) { frame.style.height = Math.max((docHeight+20), 100) + "px"; }
		
		//only repeat while editor is visible
		setTimeout("adjustMceHeight('" + editorID + "')", 1);
	}
}