TinyMCE:Auto resize editor box

From Moxiecode Documentation Wiki

Jump to: navigation, search

Contents

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);
	}
}
Personal tools