INPUT - ContentEditable Field

by bizamajig

HTML

<script src="http://www.timdown.co.uk/rangy/rangy-current/rangy-core.js"></script>
<script src="http://www.timdown.co.uk/rangy/rangy-current/rangy-selectionsaverestore.js"></script>
<div contenteditable="true" id="test">Here is some <b>glorious</b> editable content</div>

JavaScript

var div = document.getElementById("test");

function extractContent(node) {
    var frag = document.createDocumentFragment(), child;
    while ( (child = node.firstChild) ) {
        frag.appendChild(child);
    }
    return frag;
}

div.onpaste = function() {
    // Store selection
    var savedSel = rangy.saveSelection();
    
    // Remove and store the editable content
    var frag = extractContent(div);

    // Schedule the post-paste processing
    window.setTimeout(function() {
        // Get pasted content
        var pastedFrag = extractContent(div);

        // Restore original DOM
        div.appendChild(frag);
        
        // Restore previous selection
        var sel = rangy.getSelection();
        rangy.restoreSelection(savedSel);
            
        // Delete previous selection
        sel.deleteFromDocument();
        var lastNode = pastedFrag.lastChild;
        
        // Insert pasted content
        var range = sel.getRangeAt(0);
        range.insertNode(pastedFrag);

        // Move selection to after the pasted content
        range.collapseAfter(lastNode);
        rangy.getSelection().setSingleRange(range);
    }, 1);
};