paste image with clipboard API - CKEditor

Question

i saw this link question, i'm trying to do the purpose of this link, but i'm getting this error below when i paste text or an image

i'm using the CKeditor and am configuring the paste event in config.js of CKeditor, the code is:

/**
 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
    config.height = '420px';

};

CKEDITOR.on('instanceReady', function (event) {
    event.editor.on('paste', function (event) {
      // use event.originalEvent.clipboard for newer chrome versions
      var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
      console.log(JSON.stringify(items)); // will give you the mime types
      // find pasted image among pasted items
      var blob = null;
      for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") === 0) {
          blob = items[i].getAsFile();
        }
      }
      // load image if there is a pasted image
      if (blob !== null) {
        var reader = new FileReader();
        reader.onload = function(event) {
        console.log(event.target.result); // data url!
      };
      reader.readAsDataURL(blob);
      }
    });
});

I need to include any file of clipboard API?

fumihwh · Accepted Answer · 2017-01-24T07:02:09.953

1

event in editor.on('paste', function (event)... is not an original event.

From here, you can get that is CKEDITOR.eventInfo object.

So, from docs, the data can be accessed by event.data.dataValue without using clipboard API.

You can get more information form Clipboard Integration.

UPDATED

Try this to get data.

CKEDITOR.on('instanceReady', function (event) {
    event.editor.on('paste', function (pasteEvent) {
      var items = pasteEvent.data.dataValue;
      console.log(JSON.stringify(items));
    });
});

edited Jan 24 '17 at 07:02

answered Jan 23 '17 at 02:10

fumihwh

1,239
7
13

i didn't understand the documentation, i change a little more the code, but it didn't make difference on funcionality @fumi_hwh – alexandre9865 Jan 24 '17 at 06:55
1

just use `event.data.dataValue` to get data from paste event – fumihwh Jan 24 '17 at 07:02
now the error change, it are showing: "Not allowed to load local resource:", are pasting the image with physical source @fumi_hwh – alexandre9865 Jan 24 '17 at 07:16
It is actually another question. Maybe you could find the answer from [here](http://stackoverflow.com/questions/34901523/file-url-not-allowed-to-load-local-resource-in-the-internet-browser) – fumihwh Jan 24 '17 at 07:23
ok, i'm curious because ckeditor are putting a base64 "version" of the same after the physical source, do you know why it occurs? – alexandre9865 Jan 24 '17 at 07:26
oh, i found it, it is because i have the plugin 'pastebase64', tks for help. :) – alexandre9865 Jan 24 '17 at 07:39
i'm testing here, and when i take a print of my screen the text returned in data.dataValue is empty, do you know how i can paste it too? – alexandre9865 Jan 24 '17 at 10:51

paste image with clipboard API - CKEditor

1 Answers1