JSFiddle - React, Tailwind, and code Playground
HTML
<textarea></textarea>
<div id="images"></div>
JavaScript
$('textarea').on('paste', function (ev) {
var clipboardData = ev.originalEvent.clipboardData;
if (clipboardData) {
if (clipboardData.items.length == 0)
return;
$.each(clipboardData.items, function (i, item) {
if (item.type.indexOf("image") !== -1) {
insertBinaryImage(item.getAsFile());
}
});
return false;
}
});
// Inserts a base64-encoded image to the editor.
function insertBinaryImage(file) {
var reader = new FileReader();
reader.addEventListener('loadend', function () {
var img = new Image();
img.src = reader.result;
$('#images').empty().append(img);
});
reader.readAsDataURL(file);
}