I'm trying to read the clipboardData attribute of a paste event for a plugin that I'm developing for CKEditor 4.

I've established that, in Chrome, if I listen to the document object for a paste event, then the event object I get passed in the handler will contain the clipboardData attribute. I was surprised to see the same is not true of Firefox (v20).

This is the code I'm using in my CKEditor plugin, although I don't believe this to be an question relevant only to CKEditor. In Chrome I see the clipboardData object, in Firefox I do not.

editor.document.on('paste', function(event) {
  var clipboardData = event.data.$.clipboardData;
  if (clipboardData) {
    console.log(clipboardData);
  }
});

I can't see anything on the MDN site confirming if this is yet supported, I also believe that IE10 is meant to support this, but will it work on a standard API?

Edit:

I should have made this clear from the start, but I'm trying to develop support for pasting images, so I need to read the clipboard data as a file.

I'm trying to read the clipboardData attribute of a paste event for a plugin that I'm developing for CKEditor 4.

I've established that, in Chrome, if I listen to the document object for a paste event, then the event object I get passed in the handler will contain the clipboardData attribute. I was surprised to see the same is not true of Firefox (v20).

This is the code I'm using in my CKEditor plugin, although I don't believe this to be an question relevant only to CKEditor. In Chrome I see the clipboardData object, in Firefox I do not.

editor.document.on('paste', function(event) {
  var clipboardData = event.data.$.clipboardData;
  if (clipboardData) {
    console.log(clipboardData);
  }
});

I can't see anything on the MDN site confirming if this is yet supported, I also believe that IE10 is meant to support this, but will it work on a standard API?

Edit:

I should have made this clear from the start, but I'm trying to develop support for pasting images, so I need to read the clipboard data as a file.

• javascript
• html
• ckeditor
• clipboarddata

• Some (slightly dated) detail about support here: quirksmode/dom/events/cutcopypaste.html. The standard API is here: dev.w3/2006/webapi/clipops (Still a draft). If you're happy to go code diving, have a look at the discussion on Github around detecting clipboard API support for Modernizr github./Modernizr/Modernizr/pull/659 – thefrontender Commented May 9, 2013 at 6:23
• Hint: read about contentDom event, because you are not adding listener correctly (or at least not optimally). – Reinmar Commented May 9, 2013 at 11:50
• @Reinmar - I'm using that snippet from within the contentDom event. This issue really wasn't meant to be about CKEditor! – Angry Dan Commented May 9, 2013 at 14:50
• 1 I know, I know :P But as a core dev I feel to be obligated to help :P. Anyway, if you're using it inside contentDom then a) it won't be removed on contentDomUnload, b) it may stop working after setData/switching modes. You should rather use editable.attachListener to avoid issues (which sometimes are really surprising). – Reinmar Commented May 9, 2013 at 16:39
• Awesome! Thanks for the tip. Mind if I run my plugin by you once it's a little more functional? – Angry Dan Commented May 9, 2013 at 18:16

4 Answers 4

If you want to get clipboard data in paste event,these can help you:

The W3C Standard (Chrome):

event.clipboardData.getData(type)

You cant get type frome event.clipboardData.types,which is usually "text/plain". http://www.w3/TR/clipboard-apis/

IE:

window.clipboardData.getData(type)

Type can only be "Text" or "URL":http://msdn.microsoft./en-us/library/ie/ms536436%28v=vs.85%29.aspx

Firefox:

There is no api to access clipboard in ff.If you want to realize it,you can try some other way,which is depending on what you want to do.

It is indeed a CKEditor only question. The thing is that your reading the base Javascript event. But your missing the CKEditor layer that the developers of CKEditor made for you..

They already took care of the difference between the browsers. And the only thing that you need to do:

var clipboardData = ev.data.dataValue

In Ie,We can use all clipboard API ,while in chrome and firefox can only be used where fire paste event.So users can't user clipboard api to copy something from the website while use in there office,msn..

You should play with clipboard data on paste event:

editor.on( 'paste', function( event ) {
    console.log( event.data.dataValue );
});

You can modify event.data.dataValue to manipulate pasted content. Also note that priority matters because pasted data is pre-processed during pasting phases. So you can "inject" your changes at different stages by specifying a numerical listener priority:

editor.on( 'paste', function( event ) {
    console.log( event.data.dataValue );
}, null, null, priority );