title: Insert text at caret in contenteditable div
body: <p>I am using the following function to insert text where the cursor is: </p>
  
  <p><a href="http://jsfiddle.net/VzbYJ/" rel="nofollow">Live JSFIDDLE</a></p>
  
  <pre><code>function pasteHtmlAtCaret(html) {
      var sel, range;
      if (window.getSelection) {
          // IE9 and non-IE
          sel = window.getSelection();
          if (sel.getRangeAt &amp;&amp; sel.rangeCount) {
              range = sel.getRangeAt(0);
              range.deleteContents();
  
              // Range.createContextualFragment() would be useful here but is
              // non-standard and not supported in all browsers (IE9, for one)
              var el = document.createElement("div");
              el.innerHTML = html;
              var frag = document.createDocumentFragment(), node, lastNode;
              while ((node = el.firstChild)) {
                  lastNode = frag.appendChild(node);
              }
              range.insertNode(frag);
  
              // Preserve the selection
              if (lastNode) {
                  range = range.cloneRange();
                  range.setStartAfter(lastNode);
                  range.collapse(true);
                  sel.removeAllRanges();
                  sel.addRange(range);
              }
          }
      } else if (document.selection &amp;&amp; document.selection.type != "Control") {
          // IE &lt; 9
          document.selection.createRange().pasteHTML(html);
      }
  }
  </code></pre>
  
  <p>Then I have:</p>
  
  <pre><code>$("span").click(function() {
      pasteHtmlAtCaret("Some &lt;b&gt;random&lt;/b&gt; text");
  });
  </code></pre>
  
  <p>However, when I click the span, the text appends not in the contenteditable (since it lost its focus) but within itself.</p>
  
  <p>How can I fix this? I need to insert the text inside contenteditable where the cursor is, and if the cursor is not there, then the text should append at the end of the text inside contenteditable.</p>