JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<div id="div1" contenteditable="true">
    Drop image here to see browsers <b>default</b> behaviour.</div>
<br />
<br />
<br />
<br />
<div id="div2" contenteditable="true">
    Drop image here to see what happens with <b>event.preventDefault()</b></div>
<br />
<br />
A hash mark (#) is inserted at the cursor every second (Chrome: click to set cursor pos)

JavaScript

$('#div2').on('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});


function insertHtmlAtCursor(html) {
    var range, node;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        node = range.createContextualFragment(html);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}


setInterval(function() {
    insertHtmlAtCursor('#');
}, 1000)