YUI Library Examples: Rich Text Editor: Simple Editor — Basic Buttons

Setting up the Editors HTML

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


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

Note: This example also includes ContainerCore so that we can use the color buttons.

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 SimpleEditor config
7	var myConfig = {
8	height: '300px',
9	width: '600px',
10	dompath: true,
11	focusAtStart: true
12	};
13
14	//Now let's load the SimpleEditor..
15	var myEditor = new YAHOO.widget.SimpleEditor('editor', myConfig);
16	myEditor.render();
17	})();
	view plain \| print \| ?

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.