Setting a max on AutoResizeHeight

[Connor]

I have the Editor on a page that has room for the Editor to grow.  But if it gets to big it ends up messing with my masterpage.

So I was wondering if there was a work around to make the Editor AutoResizeHeight, but stop after it gets so big?

[Connor]

Well since no one has responded, I ended up figuring how to do it.

This will handle multiple Edit boxes on a screen.  it does not use the AutoResizeHeight, I put in my own code for that.  

It will grow with some white space below your text and contract as you delete stuff.  The max that you set it will stop growing and turn on the scroll bar.

used Jquery on line 69, if you find a javascript way to do that without Jquery then you do not need to include Jquery.

And if you do come up with the javascript, plz post. The less stuff to include the more likely people forget to add stuff.

Thanks

	//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
	//HOW TO USE THIS JAVASCRIPT FILE
	//  1. You must also have the Jquery js included
	//  2. You must add this line some where on the page
	//      <span id="max" style="visibility:hidden;">30</span>
	//  3. add attachResizeEvents to the Editor's OnClientLoad or just copy this and put it in the editor Declerarion
	//      OnClientLoad="attachResizeEvents"
	//
	//  If you have all of that then this should run on chrome, firfox, and ie.
	//
	//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
	//the array that keeps track of all the information for the editors
	// format for each element in the array {'id':'test1, 'initialHeight':n, 'editorHeight':n, 'difHeight':n}
	var editorArray = [];
	//MAX SIZE THAT YOU WANT: Always rows * 17
	// 17 is the number of pixel
	var max = 50 * 17; //17 pixels per line
	//the function actually called to do the resizeing
	//@arg editor: the current editor to resize
	//@arg index: the index of the editor in the array stuct
	function resizeContentArea(editor, index) {
	var initialHeight = editorArray[index].initialHeight;
	var editorHeight = editorArray[index].editorHeight;
	var difHeight = editorArray[index].difHeight;
	var oDoc = editor.get_document();
	//figure out if we are running in internet Explorer
	var ie = document.all ? true : false;
	//var targetHeight = oDoc.documentElement.scrollHeight;
	var targetHeight = ie ? oDoc.body.scrollHeight : oDoc.documentElement.scrollHeight;
	//if initail height is -1 this is the first time through,
	//so we need to get the info bro
	if (initialHeight == -1) {
	initialHeight = parseInt(editor.get_textArea().style.height.replace(/px,*\)*/g, ""));
	editorHeight = parseInt(editor.get_element().style.height.replace(/px,*\)*/g, ""));
	difHeight = editorHeight - initialHeight;
	}
	if ((targetHeight + difHeight) > initialHeight && (targetHeight + difHeight) < max) {
	editor.setSize(editor.get_element().style.width.replace(/px,*\)*/g, ""), parseInt( targetHeight + difHeight) ); //FireFox bug, TD does not decrease height
	}
	//Put everything back into the data structure
	editorArray[index].initialHeight = initialHeight;
	editorArray[index].editorHeight = editorHeight;
	editorArray[index].difHeight = difHeight;
	}
	function attachResizeEvents(editor, args) {
	editor.allowTransparency = true;
	var tempMax = parseInt($("#max").text());
	if (tempMax) { max = tempMax * 17;}
	//call it at the begining to make sure everything is in order
	resizeContentArea(editor, getEditorArrayIndex(editor));
	//attach the functions to key up
	editor.attachEventHandler("onkeyup", function() { resizeContentArea(editor, getEditorArrayIndex(editor)); });
	}
	//gets the index of the current Editor or puts it in if not already
	//@arg editor: editor to find
	function getEditorArrayIndex(editor) {
	//get the ID for current editor
	var id = editor.get_id();
	//See if it is already in our array of editors
	for (i in editorArray) {
	if (editorArray[i].id = id) {
	return i;
	}
	}
	//if it gets here then it is not in the array
	var len = editorArray.length;
	editorArray[len] = { 'id': id, 'initialHeight': -1, 'editorHeight': 0, 'difHeight': 0 }
	return len;
	}

[Rumen]

Hi Connor,

I am glad that you implemented a solution for your scenario. I updated your Telerik points for sharing your code with our community.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Chris Miller]

Is this now possible with the latest version of radEditor? I love the auto-expand but don't want the editor to expand past say around 600px tall. 

Thanks,

[Rumen]

Hello Nik,

The requested feature is not available in the latest version of RadEditor for ASP.NET AJAX, but you can use the Connor's solution to implement it.

All the best,
Rumen
the Telerik team