TinyMCE:Auto resize editor box
From Moxiecode Documentation Wiki
Contents |
[edit]
Auto Resize Editor Box
This page shows how to resize the editor box to the browser window's available height (and width).
[edit]
Auto Resize To Fit Content
The following is an alternative to the auto_resize option. In my opinion (Stephen Andrew Carter), it works better.
[edit]
The Function:
function setAutoResize(ed)
{
//Function to fix iframe to document height
fitEditor = function(ed)
{
editorID = ed.id;
var tble, 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";
//Fixes the issue of the table leaving empty space below iframe
tble = frame.parentNode.parentNode.parentNode.parentNode;
tble.style.height = 'auto';
frameHeight = parseInt(frame.style.height);
//Firefox
if ( doc.height ) docHeight = doc.height;
//MSIE
else docHeight = parseInt(doc.body.scrollHeight);
//MAKE BIGGER
if ( docHeight > frameHeight ) frame.style.height = (docHeight + 20) + "px";
//MAKE SMALLER
else if ( docHeight < frameHeight ) frame.style.height = Math.max((docHeight + 20), 100) + "px";
}
};
//add fitEditor function to tinyMCE events
ed.onSetContent.add( fitEditor );
ed.onChange.add( fitEditor );
ed.onKeyPress.add( fitEditor );
//Remaining bug: (Chrome and Opera) editor grows but doesn't shrink
}
[edit]
One way to use this function:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinyMCE AutoResize Test</title>
<script type="text/javascript" src="editor_code/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "none",
theme : "advanced",
//PUT THE REST OF YOUR INITIALIZATION CODE HERE
});
function setAutoResize(ed)
{
//PLACE FUNCTION CODE FROM ABOVE HERE
}
function makeEditor(id)
{
tinyMCE.execCommand('mceAddControl',false,id);
setAutoResize(tinyMCE.get(id));
}
</script>
</head>
<body>
<div>
<a href="#" onclick = "makeEditor('editor')">[Edit]</a>
<a href="#" onclick = "tinyMCE.execCommand('mceRemoveControl',false,'editor');">[Close]</a>
</div>
<div>
<form method="post" action="">
<div id="editor" style="width:600px;">
<p>test1</p>
</div>
</form>
</div>
</body>
</html>
--Stephensac2000 20:56, 30 December 2008 (CET)
[edit]
Other Method
[edit]
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'
});
[edit]
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";
}
