Editable Div Caret Position

Question

I have an editable div and I am using a button to insert an image into the div. Right now, I am just doing document.getElementById('elementid').innerHTML. += ; in order to get the image added to the end of the div. I would like to enter the image where the caret is. How would I go about doing this?

Thanks

score 3 · Accepted Answer · answered Dec 03 '10 at 10:39

To insert an element at the caret is not too hard. The following function inserts a node at the caret (or at the end of the selection, if content is selected) in all major browsers:

function insertNodeAfterSelection(node) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

was wondering how I could set this to end of the editable area rather than a specific point — kqlambert, Jul 16 '12 at 21:42

score 2 · Answer 2 · answered Dec 02 '10 at 21:08

2

I hate to sound negative, but this is so hard it's ridiculous. You have to deal with IE and others, and the implementations are vastly different. But where it gets uber-hard is that if you click a button to insert the image, you lose focus and the caret position, so you need to remember the position with some onblur bookmarking ability (again, IE different). The focus thing is not so much an issue if your editablecontent is in an iframe and maintains its own focus. (Note: not dissing IE here, I actually prefer their implementation to the W3C standard drek.)

You can look at some open source text editors for clues and hints. But you'll find an enormous amount of code to handle these simple tasks.

answered Dec 02 '10 at 21:08

mwilcox

4,065
23
20

There are difficulties as you mention but they're not insurmountable. My Rangy library (http://code.google.com/p/rangy) can help with most of them: it provides a single API and methods for saving and restoring a selection. I largely disagree with you about IE's selection/TextRange being better than the DOM standards: `Range` is massively superior to `TextRange` in most ways except for moving boundaries to encompass words and moving to adjacent text in the document. There is no standard for selection objects (WHATWG is working one) but IE's selection has nothing on those in other browsers. – Tim Down Dec 03 '10 at 10:26
... and actually, now I read the question a bit more closely, this task isn't that hard. – Tim Down Dec 03 '10 at 10:41

score -1 · Answer 3 · answered Dec 02 '10 at 20:46

-1

Does this help: http://jsfiddle.net/8akDr/

answered Dec 02 '10 at 20:46

Aaron Hathaway

4,280
2
19
17

I understand that you are simply replacing an inserted character/set of characters, but how would I go about inserting the character at the caret position. Would it have to be a simulated keyboard entry or somehow else? – intl Dec 02 '10 at 21:18
1

Wow...I am very ashamed to say that I thought you meant a caret, as in literally a caret character in the text...I apologize for my misunderstanding :( – Aaron Hathaway Dec 02 '10 at 21:32

Editable Div Caret Position

3 Answers3

Linked