JSFiddle - React, Tailwind, and code Playground

by Dan Nick

HTML

<button type="button" id="getfile">Go!</button>
    <div id="divbox" class="box1" contenteditable="true">The Quick Brown Fox Jumped Over The Lazy Dog</div>
    <br />
    <div id="dixbox2" class="box2" contenteditable="true">A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent</div>

CSS

.box1 {
  background-color:yellow;
}
.box2 {
  background-color:green;
}

JavaScript

$(document).ready(function () {
            $("#getfile").click(function (event) { 
                var imageurl = "logo.png";
                //var imageurl = "url(" + URL.createObjectURL(event.target.files[0]) + ")";
                var image = '<p><img src=' + imageurl + '></p>';
                var sel, range, node;
                if (window.getSelection) {
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                range = window.getSelection().getRangeAt(0);
                node = range.createContextualFragment(image);
                            range.insertNode(node);
                          }
                   } else if (document.selection && document.selection.createRange) {
                               document.selection.createRange().pasteHTML(image);
                   }
                });
            });