How much of the Clipboard API can I use within the Paste event of CKEDITOR?

Question

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.

Answer 1

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.org/TR/clipboard-apis/

IE:

window.clipboardData.getData(type)

Type can only be "Text" or "URL":http://msdn.microsoft.com/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.

Answer 2

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

Answer 3

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

Answer 4

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