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


Change Link Text August 14, 2008 by Luke

Hello, Thank you for this great script! It's really amazing. Is it possible to change the link text, so that it can say something like "Click Here" rather than printing out the entire URL?

Simple but brilliant August 7, 2008 by graycodes

Nice thanks for the script. I incorporated this on my newsletter apps.

I'm stunned July 22, 2008 by Fern

This is incredibly creative, i'd never heard of using an iframe and pulling the text out to a hidden var, simply brilliant! Props to you! --FF

Createlink June 2, 2008 by Christoff Truter

I had a look at it a bit just now, quite an annoying thing, the createlink displays a dialog in IE, but a dialog isnt available in firefox, soooo you have to create your own dialog in firefox, plus the createlink command doesn't work as expected in firefox - so I rather swapped it for the inserthtml command in firefox I came up with the following code: function createURL() { if (window.attachEvent == undefined) { var url = prompt("Enter an url",""); if(!url.match("(^(http|https|ftp|ftps)://)")) { url="http://"+url; } Editor.execCommand("inserthtml", false, '<a href="' + url + '">' + url + '</a>'); } else { document.getElementById('textbox').contentWindow.focus(); Editor.execCommand("CreateLink",true); } } You can invoke it like this: <input type="button" value="Create an url" onclick="createURL()" /> Give it a try, let me know, there must be a better way to use the createlink command in firefox though, but It gave me a few weird issues.

create link function June 2, 2008 by dr.toks

Please can you write out the code addition for "create link" Thanks a million!

browser's info June 2, 2008 by Ahmed Ali

can i know wich browser's are supported by this editor. ???????????

help February 1, 2007 by Anonymous

hi, how I can change the font name?

How!! February 1, 2007 by Anonymous

HOW ICAN WRITE A DEFAULT VALUE TOI DE EDITOR, AS "Please, write your text here..." Thanks.

wow February 1, 2007 by Anonymous

Hey! This was beatiful and soooo simple! I'm using it right now (put your name in the .js and a link to this page ;)) I added a function to change the font size trough a Select, with values from 1 to 6. In the js I just made a function like this: function changeFontSize(size) { Editor.execCommand('FontSize', false, size); }

brilliant February 1, 2007 by Pavel

Hi, this example is simply perferct. Many thanks, its very helpful. P.



Related Downloads

Simple JavaScript WYSIWYG editor