使用剪贴板API粘贴图像

时间:2017-01-21 01:48:33

标签: javascript image-uploading copy-paste clipboard.js

我看到这个link question,我正试图达到此链接的目的,但是当我粘贴文字或图片时,我会在下面收到此错误

enter image description here

我使用CKeditor并在CKeditor的config.js中配置粘贴事件,代码是:

/**
 * @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);
      }
    });
});

我需要包含剪贴板API的任何文件吗?

1 个答案:

答案 0 :(得分:1)

event中的

editor.on('paste', function (event)...不是原始事件。

here,您可以得到CKEDITOR.eventInfo对象。

因此,从文档中,event.data.dataValue可以访问数据,而无需使用剪贴板API。

您可以从Clipboard Integration获取更多信息。

<强>已更新

尝试此操作以获取数据。

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