title: How to get startOffset/endOffset of selected html text?
body: <p>I'm trying to wrap selected text from a "contenteditable" div in a given tag. Below seems to be working ok but startOffset/endOffset doesn't include HTML text. My question is how do I get the Range object to count the html tags if they exist in the selection?</p>
  
  <pre><code>getSelectedText: function() {
    var range;
    if (window.getSelection) {
      range = window.getSelection().getRangeAt(0);
      return [range.startOffset, range.endOffset];
    }
  }
  
  
  toggleTagOnRange: function(range, tag, closeTag) {
    var removeExp, val;
    if (closeTag == null) {
      closeTag = tag;
    }
    val = this.get("value");
    removeExp = RegExp("&lt;" + tag + "&gt;(.+)&lt;/" + closeTag + "&gt;");
    if (removeExp.test(val)) {
      this.set("value", val.replace(removeExp, function(match, $1) {
        return $1;
      }));
    } else {
      if (range.length &gt; 1) {
        val = val.splice(range[1], "&lt;/" + closeTag + "&gt;").splice(range[0], "&lt;" + tag + "&gt;");
        this.set("value", val);
      }
    }
    return this.get("val");
  }
  
  // this is called from a bold button click handler.
  this.toggleTagOnSelection(this.getSelectedText(), 'strong');
  </code></pre>
  
  <p>Interested in other solutions if you've got them. </p>