YUI Library Examples: Rich Text Editor: Editor Auto Adjusting Height

Setting up the Editors HTML

Setting up the Editor's HTML is done by creating a textarea control on the page.


1	<button type="button" id="toggleEditor">Toggle Editor</button>
2	<form method="post" action="#" id="form1">
3	<textarea id="editor" name="editor" rows="20" cols="75">
4	This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
5	This is some more test text.<br>This is some more test text.<br>This is some more test text.
6	</textarea>
7	</form>
	view plain \| print \| ?

Once the textarea is on the page, then initialize the Editor like this:


1	(function() {
2	//Setup some private variables
3	var Dom = YAHOO.util.Dom,
4	Event = YAHOO.util.Event;
5
6	//The Editor config
7	var myConfig = {
8	height: '300px',
9	width: '600px',
10	animate: true,
11	dompath: true,
12	focusAtStart: true
13	};
14
15	//Now let's load the Editor..
16	var myEditor = new YAHOO.widget.Editor('editor', myConfig);
17	myEditor.render();
18	})();
	view plain \| print \| ?

The Editor will now grow and shrink in height to match the content inside. It will never shrink smaller than the current height config option.


1	(function() {
2	//Setup some private variables
3	var Dom = YAHOO.util.Dom,
4	Event = YAHOO.util.Event;
5
6	//The Editor config
7	var myConfig = {
8	height: '300px',
9	width: '600px',
10	animate: true,
11	dompath: true,
12	focusAtStart: true,
13	autoHeight: true
14	};
15
16	//Now let's load the Editor..
17	var myEditor = new YAHOO.widget.Editor('editor', myConfig);
18	myEditor.render();
19	})();
	view plain \| print \| ?