Simple WYSIWYG Editor

February 1, 2007 by Christoff Truter 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.

August 17, 2009 by rrrr

holy shit... fairly simpe, i though im never gona find perfect editor, and its too complicated to make it myself... but noo, than you jesus

DEFAULT TEXT June 7, 2009 by Mark Stuart

If you want to set default text, just add src="text.htm" to the iframe code and create a page called "text.htm" and enter your default text into that page. Not tested this much, but it seems to work

May 17, 2009 by KIN

That's great! thanks!

multiply forms December 7, 2008 by Troels

How to make it able to deal with multiple forms on one screen? If somebody have the answer, send me an mail holsteinkaa /-\ gmail.com

Text from database in iframe December 6, 2008 by troels

Hej,. How do I load data inside the iframe from a variable in php. thanks Troels

Maxlength November 20, 2008 by Andy Wilshaw

Hi - is there anyway to add 'maxlength' to the iframe to restrict the number of characters entered?

Sweet November 19, 2008 by Harry

Thanks. So many of the web ones are so complicated you can't make changes without spending hours figuring out what's going on. This is great.

inserting image url November 19, 2008 by min

hello, does anyone know how to write a function for the image? I mean, insert image func. Thanks!

hidden id September 23, 2008 by sasha

I passed the edited content to a database, but when I want display it and edit it with the editor again it is impossible as the text type is "hidden". Any suggestions?

Change Link Text Part 2 August 14, 2008 by Luke

Hehe, ahhh, it was too simple for me! You just have to type the text, then highlight it and insert the URL. Thanks again for the script!

Related Downloads

Simple JavaScript WYSIWYG editor

Download 4652