If you want to support uploading pictures by pasting screenshots in the project, or pasting screenshots to display them in a certain location, you can use this code to support IE11 and chrome.
Note that pasting pictures does not support safari in mac os, and safari will pop up a prompt: Oops: You are trying to paste an image in Safari, however we are unable to retieve its data. Do not allow pasting pictures.
2016-12-01 Remarks: It is found that the new version of firefox test is installed in windows 7, this code cannot run, so please see the attached code, use paste.js to support image paste, that can be done in IE11, chrome, firefox run!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#editor {width: 500px;height:300px; border: 1px solid black;cursor:text;}
</style>
</head>
<body>
<div id="editor" contentEditable="true">Fill in the content here! </div>
<script src="index.js"></script>
</body>
</html>
document.querySelector('#editor').onpaste = function(e) {
//Determine whether to paste the image
if (e.clipboardData && e.clipboardData.items && e.clipboardData.items[0].type.indexOf('image') > -1) {
var that = this,
reader = new FileReader(),
file = e.clipboardData.items[0].getAsFile();
reader.onload = function(e) {
// this.result gets the base64 of the image (can be used for instant display)
var img = '<img src="' + this.result + '" alt=""/>';
insertAtCursor(that, img);
}
reader.readAsDataURL(file);
}
};
function insertAtCursor(dom, html) {
if (dom != document.activeElement) { // If dom doesn't get focus, append
dom.innerHTML = dom.innerHTML + html;
return;
}
var sel, range;
if (window.getSelection) {
// IE9 or non-IE browser
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt (0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(),
node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter (lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
js uses a function to insert content at the cursor position in the DIV: insertAtCursor.
Please add jquery.js by yourself.
Because the above code cannot be supported in the new version of firefox, please see the attached code and use paste.js to support pasting pictures.
paste.js project address: https://github.com/layerssss/paste.js