4

如何使用此插件开发一个工作示例：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。它特定于插件本身吗？任何指导将不胜感激！

4

2 回答 2

6

最后的调用是在 CoffeeScript 中，一种编译成 JavaScript 的语言。(http://coffeescript.org)

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

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

我不是专家——事实上我从来没有使用过咖啡脚本——但它会编译成：

$("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+")"});
});

试一试，看看你能不能让它为你工作！

于 2012-05-16T18:52:36.123 回答
1

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

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

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

于 2013-11-24T21:59:34.900 回答