Editable Div Caret Position

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

Answers


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);
    }
}

Need Your Help

How do I expand this CSS list?

javascript html css html-lists

I've gotten my menu to expand by one level, but cannot figure out how to get it to expand a second time. What am I doing wrong?

How to create dynamic database in entity framework with specified path?

entity-framework-4 entity-framework-4.1 entity edmx

currently i create dynamic database using CreateDatabase() method in Entity Framework.