title: Get caret (cursor) position in contentEditable area containing HTML content
body: <p>I have contentEditable element (can be p, div, ...) and I would like to get caret (cursor) position in it. I can normally achieve it with this piece of code:</p>
  
  <pre><code>var position = window.getSelection().getRangeAt(0).startOffset;
  </code></pre>
  
  <p>This works fine while the element contains just text. But when the element contains some HTML formatting, the returned position is relative to caret position within included HTML element.</p>
  
  <p>Let's assume contents of contentEditable element is this:</p>
  
  <pre><code>AB&lt;b&gt;CD&lt;/b&gt;EF
  </code></pre>
  
  <p>If caret is inside <code>&lt;b&gt;&lt;/b&gt;</code>, let's say between C and D, the returned position with above code is 1 instead of 3 (counted from the begining of the contentEditable element's content)</p>
  
  <p>Can anybody come up with solution to this ?</p>