In our app we process pasted content before inserting it into a contenteditable div. In Firefox and Chrome the paste event.clipboardData.getData has two keys text/plain and text/html. In Safari it has ~12 keys that range from text to RTF but does not include the HTML the user pasted in any of them. How can I access this from the paste event?
$( 'div' ).on( 'paste', function( aEvent ) {
var evt = aEvent.originalEvent;
var text = evt.clipboardData.getData( 'text/plain' );
var html = evt.clipboardData.getData( 'text/html' );
var i, len;
console.log( 'text=' + text );
console.log( 'html=' + html );
console.log( 'data types=' );
console.log( evt.clipboardData.types );
for ( i = 0, len = evt.clipboardData.types.length; i < len; i++ ) {
console.log( evt.clipboardData.types[ i ] + '=' + evt.clipboardData.getData( evt.clipboardData.types[ i ] ) );
}
});
Highlight both paragraphs, copy them, then paste on a new line and watch console.
[edit] If I use Rangy's range.toHtml from the copy event I can save a snapshot of what was selected. In the paste event I check the clipboard first, then my saved fragment, then fallback to text. Ideally I'd like to get the clipboard API to work if possible.