WYSIWYG Editor

index.html

<h1 class="title">WYSIWYG Editor</h1>

<div id='textarea'>
  <div id="control_p" class='controls'>
    <button class="boldify">B</button>
    <button class="italify">I</button>
    <button class="underline">U</button>
    <button class="font_size">Size</button>
    <button class="font_color">Color</button>
    <button class="create_link">Link</button>
    <button class="add_image">Image</button>
    <button class="insert_ul">UL</button>
    <button class="insert_ol">OL</button>
    <button class="insert_horizontal">Line</button>
  </div>
  <iframe name="textarea" class='rich_text'></iframe>
</div>

script.js

(function() {
  var textarea_elem = textarea.document;

  var boldify = function() {
    textarea_elem.execCommand('bold', false, null);
  };

  var italify = function() {
    textarea_elem.execCommand('italic', false, null);
  };

  var underline = function() {
    textarea_elem.execCommand('underline', false, null);
  };

  var font_size = function() {
    var size = prompt('Font-size (1 to 7)', '');
    textarea_elem.execCommand('FontSize', false, size);
  };

  var font_color = function() {
    var color = prompt('FontColor (enter either color name or hex or rgb or hsl) :', '');
    textarea_elem.execCommand('ForeColor', false, color);
  };

  var create_link = function() {
    var linkURL = prompt("URL for the link:", "http://");
    textarea_elem.execCommand("CreateLink", false, linkURL);
  };

  var add_image = function() {
    var imgSrc = prompt('Enter image address', '');
    if (imgSrc !== null) {
      textarea_elem.execCommand('insertimage', false, imgSrc);
    }
  };

  var insert_horizontal = function() {
    textarea_elem.execCommand('inserthorizontalrule', false, null);
  };

  var insert_ol = function() {
    textarea_elem.execCommand("InsertOrderedList", false, "newOL");
  };

  var insert_ul = function() {
    textarea_elem.execCommand("InsertUnorderedList", false, "newUL");
  };

  window.onload = function() {
    textarea_elem.designMode = 'On';
    document.querySelector('.boldify').addEventListener('click', boldify);
    document.querySelector('.italify').addEventListener('click', italify);
    document.querySelector('.underline').addEventListener('click', underline);
    document.querySelector('.font_size').addEventListener('click', font_size);
    document.querySelector('.font_color').addEventListener('click', font_color);
    document.querySelector('.create_link').addEventListener('click', create_link);
    document.querySelector('.add_image').addEventListener('click', add_image);
    document.querySelector('.insert_horizontal').addEventListener('click', insert_horizontal);
    document.querySelector('.insert_ol').addEventListener('click', insert_ol);
    document.querySelector('.insert_ul').addEventListener('click', insert_ul);
  };
})();

alsolike(
  "dYqbJJ", "Draggable - jQuery plugin", 
  "pjeqwm", "Pure CSS OffCanvas Menu", 
  "RWZZvp", "Material layout" 
)

scripts

<script src="http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js"></script>

style.css

$buttons:#F44336;
$gray:#555;
@import url(http://fonts.googleapis.com/css?family=Lato);
$font:"Lato",Helvetica,sans-serif;

body {
	margin:0;
	padding:0;
	background-color:#222;
}
* {
	font-family:$font;
	color:#888;
	box-sizing:border-box;
}

.title {
	text-align:center;
	color:#fff;
}

#textarea {
	width:900px;
	margin:30px auto;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
	box-shadow:0 0 10px 5px rgba(0,0,0,0.3);
	background-color:$gray;
	padding:5px 20px 20px;

	.controls { 
		width:100%;
		padding:15px 0 10px;
		display:flex;
		flex-direction:row;

		button {
			flex-grow:1;
			outline:none;
			border:none;
			background-color:$buttons;
			color:#fff;
			padding:10px 10px;
			margin:0 1px;
			cursor:pointer;
			transition:all 0.3s ease-in-out;
			box-shadow:0 0 1px 1px rgba(0,0,0,0.3);

			&:hover {
				box-shadow:0 0 10px 1px rgba(0,0,0,0.7);
			}
		}
	}

	.rich_text{
		background-color:#fff;
		border:none;
		width:100%;
		min-height:200px;
		padding:20px;
    cursor:text;
	}
}

WYSIWYG Editor.markdown

WYSIWYG Editor

A Pen by Akshay Nair on CodePen.

License.