Insert text at caret in contenteditable div

Question

I am using the following function to insert text where the cursor is:

Live JSFIDDLE

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && 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 && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

Then I have:

$("span").click(function() {
    pasteHtmlAtCaret("Some <b>random</b> text");
});

However, when I click the span, the text appends not in the contenteditable (since it lost its focus) but within itself.

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.

Answer 1

Honestly, the quickest solution would be to use CSS on the input button to make it look like whatever the span should be. Quick and dirty, but it works...

Answer 2

Track the cursor position through out the entire process within the div. So when the user does leave it, you still have the cursor position saved so it puts the text where the cursor was last. If code is needed, just ask.