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


Not working options April 15, 2011 by Andrés Chandía

I have tried with code uploaded by Christoff : bar.appendChild(format_button('Copy','copy')); bar.appendChild(format_button('Cut','cut')); bar.appendChild(format_button('Paste','paste')); bar.appendChild(format_button('Refresh','refresh')); but nothing, this one still works: bar.appendChild(format_button('<u>Underline</u>','underline'));

Not working options April 15, 2011 by Andrés Chandía

All of these work with no problem (the ones in the exemple code) <input type="button" onclick="Colour('Green')" style="background-color:Green;" /> but if i try 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). Print: Displays the windows print dialog so that the region can be printed. Refresh: Refreshes the region. Like this, for exemple: <input type="button" onclick="Format('Cut')" value="Cut" /> it does nothig, do I have to specify some function at the java code? how? Thanks for this useful code

color palette?! November 7, 2010 by Anonymous

how make simple 20 color palete in this editor?

Tables February 23, 2010 by Anonymous

Hi,how do u insert tables using the execcommand

Default Value January 14, 2010 by Friender

Editor.body.innerHTML = 'default text';

October 28, 2009 by Max

Hi Christoff. But in Word 2007 it's very easy to change it in Paragraph properties. By the way Opera have the same issue, but it's fine in Firefox and Chrome. Christoff, I'll be very glad for any help or advices about this. I had noticed "Shift+Enter", but I can't tell to everybody to press "Shift+Enter" for normal "Enter". If I'll find the solution I will post it here.

Line spaces October 28, 2009 by Christoff Truter

Hi Max, you'll notice the same issue with word processors like Word 2007 for example. If you hold in shift and press enter, you'll notice you'll only get one line space - I suspect its Microsoft behaviour since I didnt notice the issue in Openoffice & Firefox. I will investigate to get you a more natural solution.

October 27, 2009 by Max

marginwidth="1" marginheight="1" Will make border spaces like in textarea scrolling="yes" Will give scrollbar like in textarea How to fix big spaces after "Enter" pressing?

October 27, 2009 by Max

It's awesome, but why so big space between lines? How can I make it the same as in textarea. Why so big space from text to border? How can I customize this properties?

Add more one button September 16, 2009 by Cristiano (from Brazil)

How can i add one more button, like paragraph, for exemple?? Wich lines must i change?



Related Downloads

Simple JavaScript WYSIWYG editor