Question

如何使用此插件开发一个工作示例：HTML5 JavaScript Pasting Image Data in Chrome

作者提出了一个很好的例子，看起来它符合我们的目的。我不熟悉创建一个jQuery插件。

目标是使用此插件将剪贴板图像粘贴到富文本编辑器（如TinyMCE）中。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PASTE IMAGE</title>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">

// Created by STRd6
// MIT License
// jquery.paste_image_reader.js
(function($) {
var defaults;

  $.event.fix = (function(originalFix) {
    return function(event) {
      event = originalFix.apply(this, arguments);
     if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
        event.clipboardData = event.originalEvent.clipboardData;
     }
  return event;
};
})($.event.fix);

defaults = {
  callback: $.noop,
  matchType: /image.*/
};

$.fn.pasteImageReader = function(options) {
if (typeof options === "function") {
options = {
    callback: options
  };
}

options = $.extend({}, defaults, options);

return this.each(function() {
  var $this, element;
  element = this;
  $this = $(this);

  $this.bind('paste', function(event) {
    var clipboardData, found;
    found = false;
    clipboardData = event.clipboardData;

    Array.prototype.forEach.call(clipboardData.types, function(type, i) {
      var file, reader;
      if (found) {
        return;
      }

      if (!type.match(options.matchType)) {
        return;
      }

      file = clipboardData.items[i].getAsFile();
      reader = new FileReader();

      reader.onload = function(evt) {
        options.callback.call(element, {
          filename: file.name,
          dataURL: evt.target.result
        });
      };
      reader.readAsDataURL(file);
      found = true;
    });
  });
});
 };
 })(jQuery);


$("html").pasteImageReader (results) -> 
    {filename, dataURL} = results

$("body").css
    backgroundImage: "url(#{dataURL})"

</script>
</head>

<body>
</body>
</html>

我对插件调用感到困惑：

$("html").pasteImageReader (results) -> 
    {filename, dataURL} = results

$("body").css
    backgroundImage: "url(#{dataURL})"

这看起来不像我见过的jQuery。它是否特定于插件本身？任何指导将不胜感激！

Answer 1

最后一次调用是使用CoffeeScript编写的，这是一种编译成JavaScript的语言。（http://coffeescript.org）

$("html").pasteImageReader (results) -> 
    {filename, dataURL} = results

$("body").css
    backgroundImage: "url(#{dataURL})"

我不是专家 - 实际上我从来没有使用过coffeescript - 但它会编译为：

$("html").pasteImageReader(function(results) {
  var dataURL, filename;
  return filename = results.filename, dataURL = results.dataURL, results;
});

$("body").css({
  backgroundImage: "url(" + dataURL + ")"
});

这可能会奏效，但我不喜欢它的格式化。这是一些更干净的代码。

$("html").pasteImageReader(function(result){
     $("body").css({backgroundImage: "url("+result.dataURL+")"});
});

试一试，看看你是否能让它适合你！

Answer 2

接受的答案是正确的，因为调用是在CoffeeScript中而只是需要转换，但请注意，这些调用只是演示的一部分，他们所做的就是将页面的背景更改为粘贴的内容来自用户的剪贴板。如果要粘贴到富文本编辑器中，则需要更多内容：

$("#yourRichTextEditor").pasteImageReader(function(results) {
  document.execCommand("insertimage", 0, results.dataURL);
});

这假设您的文字编辑器正在使用启用了contentEditable的元素，例如div，其ID为yourRichTextEditor;并且无论运行什么浏览器都支持contentEditable command insertimage。我在一个项目中使用Bootstrap-Wysiwyg，我使用上面的代码调用pasteImageReader插件，但大概它应该适用于大多数（如果不是所有的）基于HTML5的富文本编辑器。

HTML5 JavaScript在Chrome中粘贴图像数据

2 个答案: