Simple WYSIWYG Editor



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.




2009-08-17: I went through all the comments I received regarding this post and wrote some additional code that can be downloaded from here, which will be featured in a future article.







Comments



http://www.indezoo.com/

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


Cool

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


when function copy,paste will work in all browsers ?


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?

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?

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

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 : http://www.chandia.net:8080/ Thanks again


Security Limits

Hi Andrés There is a security limitation on copy/cut/pasting in FF http://www.quirksmode.org/dom/execCommand.html You will notice the same limitation in full wysiwyg editors like tinymce http://tinymce.moxiecode.com and ckeditor http://ckeditor.com/ 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

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

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


1 2 3 4 5 Last / 5 Pages (47 Entries)

Post comment

Name *
Email
Title
Body *
Security Code
*
* Required fields

Latest Posts

MS SQL: Parameter Sniffing


2012-05-21 22:38:48

Be the best stalker you can be


2011-12-13 22:33:54

Top 5 posts

Moving items between listboxes in ASP.net/PHP example


Move items between two listboxes in ASP.net(C#, VB.NET) and PHP
2008-06-12 17:07:43

Simple WYSIWYG Editor


Creating a WYSIWYG textbox for your website is actually quite simple.
2007-02-01 12:00:00

C# YouTube : Google API


Post on how to integrate with YouTube using the Google Data API
2011-03-12 08:37:51

Populate a TreeView Control C#


Populate a TreeView control in a windows application.
2009-08-27 16:01:03

Cross Browser Issues: Firefox Word Wrapping


Firefox word wrapping issues
2008-06-09 09:51:21