4

このプラグインを使用して実用的な例を作成するにはどうすればよいですか：ChromeでのHTML5JavaScriptによる画像データの貼り付け

著者は、それが私たちの目的に合うように思われる素晴らしい例をまとめました。ただし、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

これらの最後の呼び出しは、JavaScriptにコンパイルされる言語であるCoffeeScriptで行われます。（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);
});

これは、テキストエディタがIDが;のcontentEditableような有効な要素で動作していることを前提としています。そして、これが実行されているブラウザが何であれ、コマンドをサポートしていること。上記のコードでプラグインを呼び出すプロジェクトでBootstrap-Wysiwygを使用していますが、おそらくすべてではないにしてもほとんどのHTML5ベースのリッチテキストエディターで機能するはずです。divyourRichTextEditorcontentEditable insertimagepasteImageReader

于 2013-11-24T21:59:34.900 に答える