Sanitizing paste event using jQuery in contentEditable div

Question

I am trying to sanitize a paste in a contentEditable div. That is, the code should look something like the following:

$('#content').bind('paste',function(e)
{
    // Ensure pasted markup is valid
});

Ideally, I would be able to parse through the pasted text and re-format it in a way that is appropriate to the site, but I don't know how to do this.

Alternatively, I would be comfortable pasting as plain text (as opposed to HTML), but I don't know how to do this either.

I am slightly less comfortable with the solution of having a box pop up with a textarea, asking the user to paste into this text area and then putting the text into the content at the previous cursor position. I know how to do this, but want to avoid it.

And I am completely uncomfortable with just preventing the user from pasting by using e.preventDefault().

Answer 1

There is no direct way in most browsers to access the content pasted before it goes into the DOM. There is, however, a fairly elaborate way to do this that only works for pastes triggered by the keyboard. See my answer here:

JavaScript get clipboard data on paste event (Cross browser)

Answer 2

I've been able to achieve this with the rangy javascript library allowing me to save and restore the caret position after sanitizing the content.

https://github.com/timdown/rangy

Tested in chrome and safari.

$("#content").on('paste', function(){
    sanitize();
});

function sanitize(){
    setTimeout(function(){

        var savedSelection = rangy.saveSelection();

        $("#content *").removeAttr("style"); // Do your parsing here.

        rangy.restoreSelection(savedSelection);         

    }, 0);  
}