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.

Related Downloads

Simple JavaScript WYSIWYG editor

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

Latest Posts

MTN targeting 'freeloading' WhatsApp

January 19, 2016

Personal Movie Database Part 2 - Service (PHP)

January 15, 2016

Paris Terror Attacks

November 14, 2015

Personal Movie Database Part 1 - UI Overview (JQuery Mobile AngularJS)

November 10, 2015

JavaScript Tip - Checking for undefined

April 9, 2015

Simple JavaScript Shop - Back to the future : Part 1

March 20, 2015

Getting my hands dirty with TypeScript

February 17, 2015

Quick and dirty look at TypeScript

January 29, 2015

My personal life in review

January 21, 2015

Quick rundown of possible new C# 6.0 features (perhaps, maybe - I think)

January 19, 2015

Most Commented on Posts

Moving items between listboxes in example

Move items between two listboxes in, VB.NET) and PHP
June 12, 2008

Simple WYSIWYG Editor

Creating a WYSIWYG textbox for your website is actually quite simple.
February 1, 2007

C# YouTube : Google API

Post on how to integrate with YouTube using the Google Data API
March 12, 2011

Populate a TreeView Control C#

Populate a TreeView control in a windows application.
August 27, 2009

ASP.NET(C#) : Autocomplete TextBox - Part 1 (From Scratch)

Part one of how to create an autocomplete textbox using ASP.NET(C#)
March 27, 2011

Angular   ASP.NET   Astronomy   Breaking News   C#   C++   Coding Horrors   Comedy   Cross Browser   Design Patterns   Google API   IIS   Integration   JavaScript   Jquery Mobile   Love and War   Microsoft Office   Personal   PHP   SEO   South Africa   SQL   Threading   TypeScript   Visual Basic   XML