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

Dependency Injection using Ninject and PostSharp

April 26, 2016

Aspect Orientated Programming (AOP) - A Brief look at PostSharp

April 15, 2016

How to become a better programmer.

April 5, 2016

JavaScript Fundamentals - Hoisting

March 22, 2016

Quick and dirty look at ECMAScript 6

March 17, 2016

JavaScript Promises

March 9, 2016

CSS Combinators

March 7, 2016

Shingles Awareness

March 4, 2016

Google Analytics : Measurement Protocol

February 24, 2016

Interesting JavaScript - SQLite (sql.js)

February 18, 2016

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   Architecture   ASP.NET   Astronomy   Breaking News   C#   C++   Coding Horrors   Comedy   Cross Browser   CSS   Design Patterns   ES6   Google API   IIS   Integration   JavaScript   Jquery Mobile   Love and War   Microsoft Office   Ninject   Personal   PHP   PostSharp   SEO   South Africa   SQL   Threading   TypeScript   Visual Basic   XML