JSFiddle - React, Tailwind, and code Playground

plain text contenteditable using clipboard API.

by marinagon

HTML

<div class="text-to-copy">
  <h2> Copy this...</h2>
  <img src="http://www.cupcakeipsum.com/assets/green_muffin.png">
  <p>
    Cupcake ipsum dolor sit amet gummi bears pastry I love apple pie. I love gummi bears cake biscuit. Sugar plum topping croissant.
  </p>
</div>

<div contenteditable class="plaintext">Paste and write here</div>

CSS

div[contenteditable] {
  height: 100px;
  border: 1px solid #000;
}

.text-to-copy {
  background-color: darkgrey;
}

JavaScript

document.querySelector(".plaintext[contenteditable]").addEventListener("paste", function(e) {
  e.preventDefault();
  var text = "";
  if (e.clipboardData && e.clipboardData.getData) {
    text = e.clipboardData.getData("text/plain");
  } else if (window.clipboardData && window.clipboardData.getData) {
    text = window.clipboardData.getData("Text");
  }
  alert(text);

  document.execCommand("insertHTML", false, text);
});