使用剪贴板粘贴图像 API - CKEditor

Question

我看到了这个 link question，我正在尝试实现这个 link 的目的，但是当我粘贴文本或图像时出现下面的错误

我正在使用 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？

Answer 1

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

来自 here, you can get that is 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));
    });
});

使用剪贴板粘贴图像 API - CKEditor

paste image with clipboard API - CKEditor

javascript

file-upload

copy-paste

ckeditor

clipboard.js