title: Wrap selected text with bbcode tags
body: <p>I'm attempting to make an <em>extremely</em> simple rich-text editor that wraps the selected text in bbcode tags.</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function wrapText(elementID, openTag, closeTag) {
      var textArea = document.getElementById(elementID);
  
      if (typeof(textArea.selectionStart) != 'undefined') {
          var begin = textArea.value.substr(0, textArea.selectionStart);
          var selection = textArea.value.substr(textArea.selectionStart, textArea.selectionEnd - textArea.selectionStart);
          var end = textArea.value.substr(textArea.selectionEnd);
          textArea.value = begin + openTag + selection + closeTag + end;
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form action="" method="POST"&gt;
  &lt;button type="button" onclick="wrapText('edit','[b]','[/b]');" &gt;B&lt;/button&gt;
  &lt;button type="button" onclick="wrapText('edit','[i]','[/i]');" &gt;I&lt;/button&gt;
  &lt;button type="button" onclick="wrapText('edit','[u]','[/u]');" &gt;U&lt;/button&gt;&lt;br /&gt;
  &lt;textarea id="edit" name="message" rows="10" cols="50"&gt;
  This is some example text.
  &lt;/textarea&gt;&lt;br /&gt;
  &lt;br /&gt;&lt;input type="submit" class="submit" value="Submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This seems to work fine for the most part, except in IE it only works in version 10.</p>
  
  <p><a href="http://jsfiddle.net/mJmur/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>What can I add or change in order to make this more cross-browser compatible so it will work with IE 8?</p>
  
  <p>I'm not opposed to using jQuery, but I'd really prefer not to unless it is really <a href="https://stackoverflow.com/questions/9245968/textarea-toggle-selection-tags-with-javascript">this complicated</a> without it.</p>