title: Add html tags around highligted text in contenteditable div
body: <p>I have a contenteditable div and i would like to add some html tags around highlighted text, after user select the text and click the button..</p>
  
  <p>Here is the sample code. It has some javascript codes but i couldnt make it work as desired. And i played with a lot actually.</p>
  
  <p><a href="https://codepen.io/anon/pen/ybzzXZ" rel="nofollow noreferrer">https://codepen.io/anon/pen/ybzzXZ</a></p>
  
  <p>P.S. I'm going to add ,  or  like html tags after when we solve the how to add html tags around it. </p>
  
  <p>Some of that js codes which i found in stackoverflow.</p>
  
  <pre><code>function getSelectionText() {
      var text = "";
      if (window.getSelection) {
          text = window.getSelection().text;
      } else if (document.selection &amp;&amp; document.selection.type != "Control") {
          text = document.selection.createRange().text;
      }
      return text;
  }
  </code></pre>
  
  <p>and the other one is </p>
  
  <pre><code>function replaceSelectionWithHtml(html) {
      var range;
      if (window.getSelection &amp;&amp; window.getSelection().getRangeAt) {
          range = window.getSelection().getRangeAt(0);
          range.deleteContents();
          var div = document.createElement("div");
          div.innerHTML = html;
          var frag = document.createDocumentFragment(), child;
          while ( (child = div.firstChild) ) {
              frag.appendChild(child);
          }
          range.insertNode(frag);
      } else if (document.selection &amp;&amp; document.selection.createRange) {
          range = document.selection.createRange();
          range.pasteHTML(html);
      }
  }
  </code></pre>