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

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

Answer 2

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 3

Could you not verify the content once it is already in the field some how? Let the content paste in, save the original content first and if the new content is not valid, replace it back with the old. It's just a theory but I'm just going to have to experiment too for now.