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.

Some (slightly dated) detail about support here: http://www.quirksmode.org/dom/events/cutcopypaste.html. The standard API is here: http://dev.w3.org/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 https://github.com/Modernizr/Modernizr/pull/659 — thefrontender, May 09 '13 at 06:23
Hint: read about [`contentDom` event](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-contentDom), because you are not adding listener correctly (or at least not optimally). — Reinmar, May 09 '13 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, May 09 '13 at 14:50
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, May 09 '13 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, May 09 '13 at 18:16

score 3 · Accepted Answer · edited Jan 02 '16 at 05:04

3

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.

edited Jan 02 '16 at 05:04

Community

1
1

answered May 09 '13 at 07:59

Daidai

547
4
13

If using jQuery, you may need to use `event.originalEvent.clipboardData` – mbomb007 Apr 25 '19 at 13:57

score 1 · Answer 2 · answered May 09 '13 at 07:29

1

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

answered May 09 '13 at 07:29

Spons

1,593
1
17
46

This doesn't help, because CKEditor doesn't include support for the clipboardData object, in Chrome you can't read the image data; that's why I want to go straight to the base event. – Angry Dan May 09 '13 at 08:05

score 0 · Answer 3 · answered May 09 '13 at 07:39

0

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

answered May 09 '13 at 07:39

呃嘀呻呐

11
2

score 0 · Answer 4 · answered May 09 '13 at 07:40

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

Thanks, I really shouldn't have related this question to CKEditor, because it's paste method doesn't have support for the getting the clipboard data I need. I'll edit the question — Angry Dan, May 09 '13 at 08:12

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

4 Answers4