7

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

http://jsfiddle.net/njLxk9cw/

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.

Rodrigo5244
  • 5,145
  • 2
  • 25
  • 36
Jonathan
  • 543
  • 9
  • 23
  • Possible duplicate - https://stackoverflow.com/questions/2787669/get-html-from-clipboard-in-javascript - also, see the Lucidchart post. – Informitics Feb 09 '18 at 17:34

0 Answers0