<!DOCTYPE html>
<html>
<head>

<!-- <meta charset="utf-8">  -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>  -->

<!-- CSS  -->
<link href="wysiwyg.css" type="text/css" rel="stylesheet"/>
<script src="../jquery/jquery.min.js"></script>
<script src="../jquery/jquery-migrate.min.js"></script>
</head>
<body>

<div class="form-group">                 
<div class="toolbar">
  <a href="#" data-command='undo'><img src="icons/undo.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='redo'><img src="icons/redo.svg" alt="" width="20" height="20"></a>
  <div class="fore-wrapper"><div class="fore-palette"></div><img src="icons/font-color.svg" alt="" width="20" height="20"></div>
  <div class="back-wrapper"><div class="back-palette"></div><img src="icons/font-background.svg" alt="" width="20" height="20"></div>
  <a href="#" data-command='bold'><img src="icons/bold.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='italic'><img src="icons/italic.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='underline'><img src="icons/underline.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='strikeThrough'><img src="icons/strikethrough.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='justifyLeft'><img src="icons/justify-left.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='justifyCenter'><img src="icons/justify-center.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='justifyRight'><img src="icons/justify-right.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='justifyFull'><img src="icons/justify-full.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='indent'><img src="icons/indent.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='outdent'><img src="icons/outdent.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='insertUnorderedList'><img src="icons/unordered-list.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='insertOrderedList'><img src="icons/ordered-list.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='h1'><img src="icons/h1.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='h2'><img src="icons/h2.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='createlink'><img src="icons/create-link.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='unlink'><img src="icons/unlink.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='insertimage'><img src="icons/insert-image.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='p'><img src="icons/p.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='subscript'><img src="icons/subscript.svg" alt="" width="20" height="20"></a>
  <a href="#" data-command='superscript'><img src="icons/superscript.svg" alt="" width="20" height="20"></a>
</div>
				<div id='editor' contenteditable>
  <h1>A Heading.</h1>
  <p>Some text that you can format. Try inserting an image or a link.</p>
</div>
                    </div>
                </div>
				
<script src="wysiwyg.js"></script>

</body>
</html>
