Mootools - HTML5 Editor

Html5 text editor with contenteditable=true and execCommand.

<script>
window.addEvent('domready', function(){
	function showHTML() {
		var myContent = $('edit').get('html');
		$('html').set('text',myContent);
	}
	function doExec(fx, extra) {
		document.execCommand(fx, false, extra);
		showHTML();
	}	


// formatBlock elements
	$('fb_p').addEvents({'click': function(e){
		doExec('formatBlock','<p>');
	}}); 
	$('fb_bq').addEvents({'click': function(e){
		doExec('formatBlock', '<blockquote>');
	}}); 
	$('fb_div').addEvents({'click': function(e){
		doExec('formatBlock', '<div>');
	}}); 
	$('fb_pre').addEvents({'click': function(e){
		doExec('formatBlock', '<pre>');
	}}); 
	$('fb_h1').addEvents({'click': function(e){
		doExec('formatBlock', '<h1>');
	}}); 
	$('fb_h2').addEvents({'click': function(e){
		doExec('formatBlock', '<h2>');
	}}); 
	$('fb_h3').addEvents({'click': function(e){
		doExec('formatBlock', '<h3>');
	}}); 
	$('fb_h4').addEvents({'click': function(e){
		doExec('formatBlock', '<h4>');
	}}); 
	$('fb_h5').addEvents({'click': function(e){
		doExec('formatBlock', '<h5>');
	}}); 
	$('fb_h6').addEvents({'click': function(e){
		doExec('formatBlock', '<h6>');
	}}); 
// images
	$('insertimage').addEvents({'click': function(e){
		var xtra = prompt('Enter a URL for your image:', 'http://');
		doExec('insertimage', xtra);
	}});
// lists
	$('insertorderedlist').addEvents({'click': function(e){
		doExec('insertorderedlist', '');
	}}); 
	$('insertunorderedlist').addEvents({'click': function(e){
		doExec('insertunorderedlist', '');
	}}); 
// formatting
	$('bold').addEvents({'click': function(e){
		doExec('bold', '');
	}}); 
	$('italic').addEvents({'click': function(e){
		doExec('italic', '');
	}}); 
	$('underline').addEvents({'click': function(e){
		doExec('underline', '');
	}}); 
	$('strike').addEvents({'click': function(e){
		doExec('strikethrough', '');
	}}); 
	$('sub').addEvents({'click': function(e){
		doExec('subscript', '');
	}}); 
	$('sup').addEvents({'click': function(e){
		doExec('superscript', '');
	}}); 
	$('inserthorizontalrule').addEvents({'click': function(e){
		doExec('inserthorizontalrule', '');
	}});  
	$('removeformat').addEvents({'click': function(e){
		doExec('removeformat', '');
	}}); 
// links
	$('createlink').addEvents({'click': function(e){
		var xtra = prompt('Enter a URL:', 'http://');
		doExec('createlink', xtra);
	}});
	$('unlink').addEvents({'click': function(e){
		doExec('unlink', '');
	}});
// colors
	$('backcolor').addEvents({'click': function(e){
		var xtra = prompt('Enter a color hex code:', '#');
		doExec('backcolor', xtra);
	}});
	$('forecolor').addEvents({'click': function(e){
		var xtra = prompt('Enter a color hex code:', '#');
		doExec('forecolor', xtra);
	}});
//alignment
	$('center').addEvents({'click': function(e){
		doExec('justifycenter', '');
	}});
	$('left').addEvents({'click': function(e){
		doExec('justifyleft', '');
	}});
	$('right').addEvents({'click': function(e){
		doExec('justifyright', '');
	}});
	$('full').addEvents({'click': function(e){
		doExec('justifyfull', '');
	}});
// fonts
	$('fontname').addEvents({'click': function(e){
		var xtra = prompt('Enter a font family name:', '');
		doExec('fontname', xtra);
	}});
	$('fontsize').addEvents({'click': function(e){
		var xtra = prompt('Enter a font size (1–7):', '3');
		doExec('fontsize', xtra);
	}});
// other
	$('indent').addEvents({'click': function(e){
		doExec('indent', '');
	}});
	$('outdent').addEvents({'click': function(e){
		doExec('outdent', '');
	}});
	$('undo').addEvents({'click': function(e){
		doExec('undo', '');
	}});
	$('redo').addEvents({'click': function(e){
		doExec('redo', '');
	}});
	$('delete').addEvents({'click': function(e){
		if (confirm('Are you sure?')) 
			doExec('delete', '');
	}});
	$('selectall').addEvents({'click': function(e){
		doExec('selectall', '');
	}});
	$('inserthtml').addEvents({'click': function(e){
		var xtra = prompt('Enter valid HTML:', '');
		doExec('inserthtml', xtra);
	}});
});
</script>