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().

possible duplicate of [JavaScript get clipboard data on paste event (Cross browser)](http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser) — Dave Jarvis, Dec 03 '13 at 19:53

score 2 · Answer 1 · answered Jun 29 '14 at 21:54

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

But it will flash. for a moment the original paste will be visible, until it gets sanitized. you could set the text color to `transparent`, then sanitize, and then remove that style. — vsync, Jul 08 '14 at 19:54

score 2 · Accepted Answer · edited May 23 '17 at 12:24

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)

edited May 23 '17 at 12:24

Community

1
1

answered Sep 21 '11 at 23:16

Tim Down

292,637
67
429
506

score 0 · Answer 3 · answered Jan 23 '13 at 20:17

0

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.

answered Jan 23 '13 at 20:17

Daniel

11

2

You can always post your guess/theory as a comment under the question. – Fallup Jan 23 '13 at 20:47

Sanitizing paste event using jQuery in contentEditable div

3 Answers3