Free WYSIWYG Textarea HTML Editor

[olddocks]

I just completed a simple lightweight WYSIWYG Textarea HTML editor for to be used in php scripts or CMS project. It inserts html code on the selected text in the textarea content.

It is free for download and can be used for personal or commercial purpose or do whatever you want with this.



Download

Note: The same editor can insert bbcodes and you can download this bbcode editor (free)

Let me know if you like it.

[Costin Trifan]

I love "dead simple" projects, and you know why? because they're easier to extend!

Check out my example: (though, I changed your code that you won't even recognize it )

/*
*	Description: JavaScript TextEditor
*	Author: Costin Trifan
*	Date: Fri Dec 19, 2008
*	Based on >> http://corpocrat.com/2008/12/18/free-wysiwyg-textarea-html-editor/#comment-2461
*/
var TextEditor = function()
{
    this.menubar = null;
    this.editor = null;
};

TextEditor.prototype =
{
	/*
	* Create the menu bar
	*/
    createMenuBar : function(parentContainer, _id, _class)
    {
        (_class) ? _class : null;
        this.menubar = JUNE.Dom.createElement('div', null, _id, _class);
        parentContainer.appendChild(this.menubar);
    },

	/*
	* Create the text editor (textarea)
	*/
    createEditor : function(parentContainer, _id, _rows, _cols)
    {
        this.editor = JUNE.Dom.createElement('textarea', null, _id);
        this.editor.setAttribute('rows', _rows || 20);
        this.editor.setAttribute('cols', _cols || 80);
        parentContainer.appendChild(this.editor);
    },

	/*
	* Create the menu item
	*/
    createButton : function(_id, _class, _title, _command)
    {
        var btn = JUNE.Dom.createElement('a', null, _id);
			btn.setAttribute('href', '#');
			btn.setAttribute('rel', 'nofollow');
			btn.setAttribute('title', _title);
		if (_class) {
			btn.className = _class;
		}
        JUNE.Event.addHandler(btn, 'click', function(event)
		{
			JUNE.Event.stopPropagation(event);
			JUNE.Event.preventDefault(event);
			// execute command:
			_command();
		});
		this.menubar.appendChild(btn);
    },

	/*
	* Get a reference to the text editor
	*/
	getEditor : function()
    {
        return this.editor;
    },

	/*
	* Convenience function to inject markup
	*/
    addTags : function(tagStart, tagEnd)
    {
		var textarea = this.getEditor();

		// Code for IE
        if (document.selection) 
        {
            textarea.focus();
            var sel = document.selection.createRange();
            sel.text = tagStart + sel.text + tagEnd;
        }
        else 
        {  // Code for Mozilla Firefox
            var len = textarea.value.length;
            var start = textarea.selectionStart;
            var end = textarea.selectionEnd;

            var sel = textarea.value.substring(start, end);
            var rep = tagStart + sel + tagEnd;
            textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
        }
    }
};


/*=========================================
*  				COMMANDS
=========================================*/
/*
* Add url
*/
TextEditor.prototype.addUrl = function()
{
	var url = prompt('Enter the URL:','http://');

	if (url)
	{
		var textarea = this.getEditor();
		if (document.selection) 
		{
			this.editor.focus();
			var sel = document.selection.createRange();
			sel.text = '' + sel.text + '';
		}
		else 
		{
			var len = textarea.value.length;
			var start = textarea.selectionStart;
			var end = textarea.selectionEnd;

			var sel = textarea.value.substring(start, end);
			var rep = '<a href="' + url + '">' + sel + '</a>';;
			textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
		}
	}
};
/*
* Add image
*/
TextEditor.prototype.addImage = function()
{
	var url = prompt('Enter the Image URL:','http://');

	if (url)
	{
		var textarea = this.getEditor();
		if (document.selection) 
		{
			textarea.focus();
			var sel = document.selection.createRange();
			if (confirm('Do you want to make this image be opened in a popup window?'))
			{
				sel.text = "\n"+'<p><img src="' + url + '" name="open_win" alt="Click to display in a popup window" title="Click to display in a popup window" /></p>';
			}
			else { sel.text = "\n"+'<p><img src="' + url + '" alt="" title="" /></p>'; }
		}
	   else 
		{
			var len = textarea.value.length;
			var start = textarea.selectionStart;
			var end = textarea.selectionEnd;
			
			var sel = textarea.value.substring(start, end);
			var rep;
			if (confirm('Do you want to make this image be opened in a popup window?'))
			{
				rep = "\n"+'<p><img src="' + url + '" name="open_win" alt="Click to display in a popup window" title="Click to display in a popup window" /></p>';
			}
			else { rep = "\n"+'<p><img src="' + url + '" alt="" title="" /></p>'; }

			textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
		}
	}
};
TextEditor.prototype.makeBold = function () { return this.addTags('<strong>', '</strong>'); };
TextEditor.prototype.makeItalic = function () { return this.addTags('<em>', '</em>'); };
TextEditor.prototype.makeUnderline = function () { return this.addTags('<u>', '</u>'); };
TextEditor.prototype.makeStrikeThrough = function () { return this.addTags('<strike>', '</strike>'); };
TextEditor.prototype.makeParagraph = function () { return this.addTags("\n"+'<p>', '</p>'); };
TextEditor.prototype.makeQuote = function () { return this.addTags("\n"+'<blockquote>'+"\n"+'<p>', '</p>'+"\n"+'<cite><a href="#source">source</a></cite></blockquote>'); };
TextEditor.prototype.makeCode = function () { return this.addTags("\n"+'<div class="AutoSize code"><div class="codeHeader"><p class="codeTitle">Code:</p><p class="code_Expanded"></p></div><div class="cf">', "\n"+'<!--// THE CODE FROM VISUAL STUDIO GOES HERE -->'+"\n"+'</div></div>'); };
TextEditor.prototype.makeOrderedList = function () { return this.addTags("\n"+'<ol><li><span>', '</span></li></ol>'); };
TextEditor.prototype.makeUnOrderedList = function () { return this.addTags("\n"+'<ul><li><span>', '</span></li></ul>'); };
TextEditor.prototype.makeSubtitle = function () { return this.addTags("\n"+'<h4 class="PostEntrySubTitle">', '</h4>'); };

/*
*  SPECIAL COMMANDS
*/
TextEditor.prototype.makePreview = function () 	{ throw new Error('Not yet implemented'); };
TextEditor.prototype.makeSave = function () 	{ throw new Error('Not yet implemented'); };
TextEditor.prototype.makePublish = function () 	{ throw new Error('Not yet implemented'); };
TextEditor.prototype.makeClear = function () 	{ throw new Error('Not yet implemented'); };

and somewhere in your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />

	<script type="text/javascript" src="app_js/JUNE_2_0.js"></script>
</head>
<body>


<form name="form1" method="post" action="#">
	<div id="text_editor_wrapper"></div>
</form>


<script type="text/javascript" src="texteditor.js"></script>

<script type="text/javascript">

	var parent_container = JUNE.Dom.find('text_editor_wrapper');

	var editor = new TextEditor();

	// Create the menuBar and the TextEditor
	editor.createMenuBar(parent_container, 'menubar');
	editor.createEditor(parent_container, 'text_editor'/*[, rows=17, cols=80]*/);

	// Register commands
	var	makeBold = function() { return editor.makeBold(); },
		makeItalic = function() { return editor.makeItalic(); },
		makeUnderline = function() { return editor.makeUnderline(); },
		makeStrike = function() { return editor.makeStrikeThrough(); },

		makeOList = function() { return editor.makeOrderedList(); },
		makeUList = function() { return editor.makeUnOrderedList(); },
		makeQuote = function() { return editor.makeQuote(); },
		makeCode = function() { return editor.makeCode(); },
		makeParagraph = function() { return editor.makeParagraph(); },
		makeSubtitle = function() { return editor.makeSubtitle(); },
		addImage = function() { return editor.addImage(); },
		addUrl = function() { return editor.addUrl(); },

		makePreview = function() { return editor.makePreview(); },
		makeSave = function() { return editor.makeSave(); },
		makePublish = function() { return editor.makePublish(); },
		makeClear = function() { return editor.makeClear(); };


	// Create buttons [id, class, title, command]
	editor.createButton('bold', 'button button_bold', 'Bold', makeBold);
	editor.createButton('italic', 'button button_italic', 'Italic', makeItalic);
	editor.createButton('underline', 'button button_underline', 'Underline', makeUnderline);
	editor.createButton('strike', 'button button_strike', 'Strike', makeStrike);

	editor.createButton('olists', 'button button_olists', 'Ordered list', makeOList);
	editor.createButton('ulists', 'button button_ulists', 'Unorderedlist', makeUList);
	editor.createButton('quote', 'button button_quote', 'Quote', makeQuote);
	editor.createButton('code', 'button button_code', 'Code', makeCode);
	editor.createButton('paragraph', 'button button_paragraph', 'Paragraph', makeParagraph);
	editor.createButton('subtitle', 'button button_subtitle', 'Subtitle', makeSubtitle);
	editor.createButton('image', 'button button_image', 'Insert image', addImage);
	editor.createButton('url', 'button button_url', 'Insert link', addUrl);

	editor.createButton('preview', 'button button_preview', 'Preview', makePreview);
	editor.createButton('save', 'button button_save', 'Save', makeSave);
	editor.createButton('publish', 'button button_publish', 'Publish', makePublish);
	editor.createButton('clear', 'button button_clear', 'Clear', makeClear);

</script>

</body>
</html>

Definitely I'm gonna use it on my blog

here's a screenshot:

[olddocks]

very nice professional code Costin

[Costin Trifan]

no it's not! That's the result of a 2 and a half hour of messing around with your code. you should see the latest version

but, thank you for your comment

[sjrsigc]

Any chance someone can post script to add lists (<ol><ul>) to this editor (to work in IE7, firefox, Safari... the usual browser suspects)? I looked over Costin's code, but I'm afraid it's over my head. Thanks much, with lists this editor would be perfect for my needs.

[Costin Trifan]

^^ I've put that code only for fun, it's not final or anything (just the result of playing around with js).

About your request:

#1. Download the code for the texteditor from here: http://corpocrat.com/2008/12/18/free...a-html-editor/

#2. Open the ed.js file and paste the following code at the end of the file:

function doList()
{
	// Check what type of list has been selected:
	var list = prompt("Select your list type: ", "ul");
	
	if (list)
	{
		if (list.toLowerCase() == 'ul')
		{
			doAddTags('<ul>', '');
			while(listitem = prompt('Enter your text', ''))
			{
				doAddTags('<li>'+listitem, '</li>');
			}
			doAddTags('', '</ul>');
		}
		else if (list.toLowerCase() == 'ol')
		{
			doAddTags('<ol>', '');
			while(listitem = prompt('Enter your text', ''))
			{
				doAddTags('<li>'+listitem, '</li>');
			}
			doAddTags('', '</ol>');
		}
		else { return null; }
	}
}

#3. In the same document, right at the beginning, you'll see a function called init and some lines starting with document.write. There paste this line of code:

	document.write("<img class=\"button\" src=\"editor/images/link.gif\" name=\"btnList\" onClick=\"doList()\">");

and that's it.

If you'll use the exact code I posted here, you'll notice that your list button will have the same image as the link button. It will act the same way as the one of this editor (prompt you for each list item).

hope this helps

[sjrsigc]

Thank you Costin-
I greatly appreciate your help, and while this does help - and I do hate to be a pain - have you any ideas for making a list from selected text? Basically, user types in (or more likely pastes in) some info and then wants to make a list. The "desired" process would be, select text in textarea, apply list of choice (<ol> or <ul>). Any help with that? Thank you in advance.