Fatal编程技术网
  • jquery/
  • Jquery HTML5 JavaScript在Chrome中粘贴图像数据

Jquery HTML5 JavaScript在Chrome中粘贴图像数据

jquery html tinymce coffeescript

Jquery HTML5 JavaScript在Chrome中粘贴图像数据,jquery,html,tinymce,coffeescript,Jquery,Html,Tinymce,Coffeescript,如何使用此插件开发工作示例： 作者提出了一个很好的例子，似乎符合我们的目的。但是，我不熟悉创建jQuery插件 目标是使用此插件将剪贴板图像粘贴到富文本编辑器（如TinyMCE）中 <!doctype html> <html> <head> <meta charset="utf-8"> <title>PASTE IMAGE</title> <script type="text/javascript" src="js/

如何使用此插件开发工作示例：

作者提出了一个很好的例子，似乎符合我们的目的。但是，我不熟悉创建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>
这看起来不像我见过的jQuery。它是特定于插件本身的吗？任何指导都将不胜感激

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

我不是专家——事实上我从来没有使用过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+")"});
});
试一试，看看你能不能让它为你工作

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

$("#yourRichTextEditor").pasteImageReader(function(results) {
  document.execCommand("insertimage", 0, results.dataURL);
});
这假设您的文本编辑器正在使用启用了
contentEditable
的元素，如
div
，ID为
yourRichTextEditor
；并且无论运行在哪个浏览器中，它都支持插入图像。我在一个项目中使用了上述代码调用
pasteImageReader
插件，但它应该适用于大多数基于HTML5的富文本编辑器。

最后一个代码插件调用不是JavaScript，所以它不是jQuery。答案就在插件代码中，它的CoffeeScript——因为CoffeeScript编译成Javascript，所以它就是jQuery。见下面我的答案。 
$("html").pasteImageReader(function(result){
     $("body").css({backgroundImage: "url("+result.dataURL+")"});
});

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