Intercept Paste Event into contenteditable

by Ben Clayton

HTML

<div style="color:red">Some <em>rich</em> <span style="font-size:2em">HTML</span> to copy and paste</div>
<div contenteditable>Paste here ...</div>

CSS

div[contenteditable] {
  height: 100px;
  background-color: #F0F2F8;
  margin-top: 20px;
}

JavaScript

var elements = document.querySelector("div[contenteditable]");
if (elements) {
  elements.addEventListener("paste", function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    var temp = document.createElement("div");
    temp.innerHTML = text;
    document.execCommand("insertHTML", false, temp.textContent);
  });
}