dehart/wisiwig.html

## wisiwig.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>New Doc</title>
<style>
body {
	background:grey;
	color: white;
}
#editor {
	resize:vertical;
	overflow:auto;
	min-height:400px;
}

</style>
</head>
<body>

<div>
   <div id='editControls'>
<div class="group">
        <button value='undo'>«</button>
        <button value='redo'>»</button>
</div>
<div class="group">
        <button value='bold'><b>B</b></button>
        <button value='italic'><i>I</i></button>
        <button value='underline'>U</button>
        <button value='strikeThrough'><s>S</s></button>
</div>
<div class="group">
        <button value='justifyLeft'>Left</button>
        <button value='justifyCenter'>Center</button>
        <button value='justifyRight'>Right</button>
        <button value='justifyFull'>Justify</button>
</div>
<div class="group">
        <button value='indent'>-»</button>
        <button value='outdent'>«-</button>
        <button value='insertUnorderedList'>UL</button>
        <button value='insertOrderedList'>OL</button>
</div>
	<select>
	  <option value=''>Default style</option>
	  <option value='p'>Text body</option>
	  <option value='blockquote'>Quotation</option>
	  <option value='h1'>Title</option>
	  <option value='h2'>Subtitle</option>
	  <option value='h3'>Heading 1</option>
	  <option value='h4'>Heading 2</option>
	  <option value='h5'>Heading 3</option>
	  <option value='superscript'>Footer</option>
	  <option value='subscript'>Header</option>
	</select>
        <button value='h1'>h<sup>1</sup></button>
        <button value='h2'>h<sup>2</sup></button>
        <button value='p'>p</button>
    </div>
    <div id='editor' contenteditable>
      <h1>This is a title!</h1>
      <p>This is just some example text to start us off</p>
    </div>
 </div>

<script>
var toolbarEvent = function(element){
  switch(element.value) {
    case 'h1':
    case 'h2':
    case 'p':
      document.execCommand('formatBlock', false, element.value);
      break;
    default:
      document.execCommand(element.value, false, null);
      break;
    }
};
[].forEach.call(document.querySelectorAll('#editControls button'), function(element){
	element.addEventListener('click',function(e){toolbarEvent(element)});
});
[].forEach.call(document.querySelectorAll('#editControls select'), function(element){
	element.addEventListener('change',function(e){toolbarEvent(element)});
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>New Doc</title>
	<style>
	body {
	background:grey;
	color: white;
	}
	#editor {
	resize:vertical;
	overflow:auto;
	min-height:400px;
	}

	</style>
	</head>
	<body>

	<div>
	<div id='editControls'>
	<div class="group">
	<button value='undo'>«</button>
	<button value='redo'>»</button>
	</div>
	<div class="group">
	<button value='bold'><b>B</b></button>
	<button value='italic'><i>I</i></button>
	<button value='underline'>U</button>
	<button value='strikeThrough'><s>S</s></button>
	</div>
	<div class="group">
	<button value='justifyLeft'>Left</button>
	<button value='justifyCenter'>Center</button>
	<button value='justifyRight'>Right</button>
	<button value='justifyFull'>Justify</button>
	</div>
	<div class="group">
	<button value='indent'>-»</button>
	<button value='outdent'>«-</button>
	<button value='insertUnorderedList'>UL</button>
	<button value='insertOrderedList'>OL</button>
	</div>
	<select>
	<option value=''>Default style</option>
	<option value='p'>Text body</option>
	<option value='blockquote'>Quotation</option>
	<option value='h1'>Title</option>
	<option value='h2'>Subtitle</option>
	<option value='h3'>Heading 1</option>
	<option value='h4'>Heading 2</option>
	<option value='h5'>Heading 3</option>
	<option value='superscript'>Footer</option>
	<option value='subscript'>Header</option>
	</select>
	<button value='h1'>h<sup>1</sup></button>
	<button value='h2'>h<sup>2</sup></button>
	<button value='p'>p</button>
	</div>
	<div id='editor' contenteditable>
	<h1>This is a title!</h1>
	<p>This is just some example text to start us off</p>
	</div>
	</div>

	<script>
	var toolbarEvent = function(element){
	switch(element.value) {
	case 'h1':
	case 'h2':
	case 'p':
	document.execCommand('formatBlock', false, element.value);
	break;
	default:
	document.execCommand(element.value, false, null);
	break;
	}
	};
	[].forEach.call(document.querySelectorAll('#editControls button'), function(element){
	element.addEventListener('click',function(e){toolbarEvent(element)});
	});
	[].forEach.call(document.querySelectorAll('#editControls select'), function(element){
	element.addEventListener('change',function(e){toolbarEvent(element)});
	});
	</script>
	</body>
	</html>