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:


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)

	<title>Simple Javascript WYSIWYG Editor</title>
		<script language="Javascript" src="editor.js"></script>
		<form method="POST">
				<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" />
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 October 24, 2011 by Idris

this is something that i didn't really knew...thank you for sharing

Cool September 4, 2011 by Anonymous

That's a cool little tutorial, a nice basic wysiwyg editor with a lot to of scope to build on to.

September 3, 2011 by Anonymous

when function copy,paste will work in all browsers ?

August 27, 2011 by Christoff Truter

Hi there Niaz Its definitely possible to pass the contents of the wysiwyg via an ajax call, which serverside language do you use? I can post you some examples of how to achieve this..

Re: Can this be saved? August 27, 2011 by Andrés Chandía

I don't know about ajax, but if you know about html forms you will be able to save the text content.

Can this be saved? August 27, 2011 by Niaz Mohammed

hi, i have a quick question.. can this be saved via some sort of ajax call? basically how do you get the html of the textarea? :-\

Security Limits April 15, 2011 by Andrés Chandía

Yes, you are right, thanks anyway for all of your help. About the separator, I have come up with this code, I don't know if it is the best but it works: function separator(html, type) { var button = document.createElement('separator'); button.setAttribute("type", "separator"); button.innerHTML = html; button.onclick = function() { richtextarea.contentWindow.document.execCommand(action, false, null); } return button; } and then: bar.appendChild(separator('||'')); if you want to check what I have done : Thanks again

Security Limits April 15, 2011 by Christoff Truter

Hi Andrés There is a security limitation on copy/cut/pasting in FF You will notice the same limitation in full wysiwyg editors like tinymce and ckeditor They pretty much just ask people to use the keyboard shortcuts instead... As for IE, it pops up a box asking if you want to allow access to the clipboard. The pasting issue in IE is due to the execcommand expecting a selection area (one we'll need to create via code eg. contentWindow.document.selection.createRange()

Copy, Cut and Paste April 15, 2011 by Andrés Chandía

Thanks a Lot for your quick answer. Yes I work in ubuntu with firefox this is what I have: bar.appendChild(format_button('<u>Underline</u>','underline')); bar.appendChild(url_button('Link', 'url')); bar.appendChild(format_button('Copy','copy')); bar.appendChild(format_button('Cut','cut')); bar.appendChild(format_button('Paste','paste')); bar.appendChild(format_button('Refresh','refresh')); bar.appendChild(format_button('Print','print')); none of these working. also I'm trying to figure out which would be the function for a separator, something like a pipe | in between certain buttons Thanks Again.

Copy Cut and Paste April 15, 2011 by Christoff Truter

Hi Andrés, I see copy & cut works fine in IE, but not paste, none of the three options work in FF. Will have a look at it for you ASAP

Related Downloads

Simple JavaScript WYSIWYG editor