Basic wysiwyg editor contenteditable

Basic wysiwyg editor contenteditable

by Adi Jaya

HTML

<main>
<h2>Basic wysiwyg editor contenteditable</h2>
<div id="wrap_button">
  <button data-cmd="bold" class="cmd">B</button>
  <button data-cmd="italic" class="cmd">I</button>
  <button data-cmd="underline" class="cmd">U</button>
  <button data-cmd="strikeThrough" class="cmd">S</button>
  <button data-cmd="insertOrderedList" class="cmd">OL</button>
  <button data-cmd="insertUnorderedList" class="cmd">UL</button>
</div>

<div id="tes">
im ready for editing dddddddddd
</div>

</main>

CSS

#tes {
  margin : 10px;
  padding: 10px;
  border : 1px solid silver;
  height :150px;
  overflow : auto;
  background : beige;
  resize : vertical;
}

JavaScript

var editor 	=		$('#tes');
editor.attr("contenteditable",true);
$('button.cmd').on('click',function(e){
	
	var cmd 		= 	$(this).attr('data-cmd');	
  editor = document.execCommand(cmd);
	e.preventDefault();
	return false;
});