Simple WYSIWYG Editor

February 1, 2007 by JavaScript  

Creating a WYSIWYG textbox for your website is actually quite simple.

Thanks to the html iframe component that contains the execCommand function, which enables us to access html tags in real time.

The following snippets shows how to implement this function:

editor.js

var Editor;

function Format(action)
{
	Editor.execCommand(action, false, null);
}

function Colour(colour)
{		
	Editor.execCommand("forecolor",false, colour);
}

window.onload = function()
{
	Editor = document.getElementById('textbox').contentWindow.document;
	Editor.designMode = "on";
	document.forms[0].onsubmit = function()
	{
		var text = document.getElementById('text');
		text.value = Editor.body.innerHTML;
	}
}

In the top script we attach anonymous methods to the page load event and one on the form submit event (assigns the contents of the iframe to a form control - since we need to submit it via the page)

editor.html
<html>
	<head>
	<title>Simple Javascript WYSIWYG Editor</title>
		<script language="Javascript" src="editor.js"></script>
	</head>
	<body>
		<form method="POST">
			<div>
				<input type="button" onclick="Colour('Green')" style="background-color:Green;" />
				<input type="button" onclick="Colour('Red')" style="background-color:Red;" />
				<input type="button" onclick="Colour('Blue')" style="background-color:Blue;" />
				<input type="button" onclick="Colour('Black')" style="background-color:Black;" />
				<input type="button" onclick="Format('bold')" value="B" />
				<input type="button" onclick="Format('italic')" value="I" />
				<input type="button" onclick="Format('Underline')" value="U" />
				<input type="button" onclick="Format('justifycenter')" value="C" />
				<input type="button" onclick="Format('justifyleft')" value="L" />
				<input type="button" onclick="Format('justifyright')" value="R" /><br/>
				<iframe id="textbox" style="width:300px; height:150px"></iframe><br/>
				<input type="submit" value="Go" />
				<input type="hidden" id="text" name="text" />
			</div>
		</form>
	</body>
</html>
This is just a basic implementation of the execCommand function, here is a small list of properties one can use as well, things like cut/paste inserting tables/links/images etc:

BackColor: Get or set the background color of the selected region.
(this property shows some weird behavior in Firefox 2.0)
Copy: Copies the selected region to the clipboard.
Cut: Removes the selected region from the document.
Paste: Adds data from clipboard to region (if applicable).
InsertHorizontalRule: Adds a horizontal rule to the region.
InsertImage: Displays an IE defined modal dialog that contains full image selection features, alt tag modification, border setting, etc.
InsertMarquee: Converts the selected text into a marque.
InsertSelectDropDown: Adds a drop down list to the region.
Print: Displays the windows print dialog so that the region can be printed.
Refresh: Refreshes the region.
CreateLink: Displays an IE defined modal dialog that lets you add a hyperlink using either selected text or new text.
InsertUnorderedList: Toggles between the selected text being an unordered list and normal text.


Leave a Comment


DEFAULT TEXT February 1, 2007 by Graham

To have some default text do the following... document.getElementById('textbox').contentWindow.document.write('your defualt text'); Where textbox is the name of the iframe

DEFAULT TEXT February 1, 2007 by Graham

In my post above, take out the backslashes And thanks for this script

Thank you February 1, 2007 by Anonymous

This is a amazing, you've touched the key aspect of the issue. How to make it able to deal with multiple forms on one screen?

just what i wanted February 1, 2007 by Anonymous

this is exactly what i was looking for, every other example was over complicated for what i wanted. this is excellent. cheers :)

Really cool February 1, 2007 by Anonymous

I can not believe it's so easy to create a WYSIWYG tool

Using the Script February 1, 2007 by Anonymous

How do I access the content of the textarea? I want to use a PHP script to insert the content into a database.

Access Field February 1, 2007 by Christoff Truter

When examining the script, you'll see this piece of code inside the onload event: document.forms[0].onsubmit = function() { var text = document.getElementById('text'); text.value = Editor.body.innerHTML; } Now what this does is, it sends the contents of the textarea(iframe) to a hidden field (named text in this case) on the page, which insures that the contents will be sent along with your form submission (postback) <input type="hidden" id="text" name="text" /> Typically you'll access it, via the $_Request in php, this case $_Request['text']



Related Downloads

Simple JavaScript WYSIWYG editor