All geek questions in one place

HTML5 JavaScript Insert Images in Chrome

How to create a working example using this plugin: HTML5 JavaScript Insert images in Chrome

The author has compiled a great example that seems to be suitable for our purposes. However, I am not familiar with creating a jQuery plugin.

The goal is to use this plugin to paste clipboard images into an extended text editor such as 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>

The plugin call confuses me:

 $("html").pasteImageReader (results) -> {filename, dataURL} = results $("body").css backgroundImage: "url(#{dataURL})"

This is not like the jQuery I saw. Is this specific to the plugin itself? Any guidance would be greatly appreciated!

+4
source share
2 answers

These last calls are in CoffeeScript, a language that compiles into JavaScript. (Http://coffeescript.org)

 $("html").pasteImageReader (results) -> {filename, dataURL} = results $("body").css backgroundImage: "url(#{dataURL})"

Im no expert - in fact I never used coffeescript at all, but it would compile:

 $("html").pasteImageReader(function(results) { var dataURL, filename; return filename = results.filename, dataURL = results.dataURL, results; }); $("body").css({ backgroundImage: "url(" + dataURL + ")" });

This will probably work, but I don't like how it was formatted. Here is some cleaner code.

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

Take a picture and see if you can make it work for you!

+6
source

The accepted answer is correct, since the calls are in CoffeeScript and just need to be converted, but note that these calls are only part of the demo, and all they do is change the background of the page to be what was pasted from the user clipboard. If you want to paste into a text editor, you will need something more along these lines:

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

This assumes that your text editor works with the contentEditable -enabled element, such as a div , with the identifier yourRichTextEditor ; and that any browser it runs on supports the contentEditable insertimage . I use Bootstrap-Wysiwyg in a project where I call the pasteImageReader plugin with the above code, but apparently it should work for most if not all HTML5 based text editors.

+1
source

Source: https://habr.com/ru/post/1412844/

More articles:


All Articles