Insert text at caret in contenteditable div

Question

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

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.

I think this is your goal: http://stackoverflow.com/questions/2213376/how-to-find-cursor-position-in-a-contenteditable-div — mauretto, May 16 '13 at 07:19
By not working, I mean I am unable to access the posted link. I am unable to see the code snippet you have posted on jsfiddle. — Viral Jain, May 16 '13 at 07:20
I noticed that your code is ok if you use mouseenter() instead of click() on span. It's ok with click event if you use button instead of span too. I bet 1€ you need click event on span object of course! — mauretto, May 16 '13 at 07:25
@mauretto this is with input: http://jsfiddle.net/VzbYJ/10/ it works fine if the cursor is inside the contenteditable but how can i prevent adding text everywhere on html when the cursor is outside the contenteditable? — enb081, May 16 '13 at 07:32
but if you click the button then it paste the text at the end of the div content. Is it ok for you? — mauretto, May 16 '13 at 08:28
yes, that's what i was looking for! paste the text in the cursor if the cursor is inside the div, otherwise paste it at the end of the div — enb081, May 16 '13 at 08:30

score 1 · Answer 1 · answered May 16 '13 at 08:27

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...

answered May 16 '13 at 08:27

Steven Senkus

46
2

Thanks for your answer, the problem wasn't the use of span instead of button, but rather inserting the text "everywhere" in the html when the cursor was not on the contenteditable. I [fixed](http://jsfiddle.net/VzbYJ/32/) it. – enb081 May 16 '13 at 08:31

score 0 · Answer 2 · answered Jun 21 '14 at 17:49

0

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.

answered Jun 21 '14 at 17:49

SpoiledTechie.com

10,515
23
77
100

Insert text at caret in contenteditable div

2 Answers2