copy POC

by Zmetser

HTML

<p> Click into the contenteditable div (on the "asd") copy and paste, if you get the image and the caption it works.</p>
<div id="editor" contenteditable="true">
  <figure contenteditable="false">
    <div>
      <img src="http://thezee.hu/public/test/graphic/tumblr_n96gqfDrAi1qhttpto4_1280.jpg" alt="" width="300">
      <figcaption contenteditable="false">This is my caption.</figcaption>
    </div>
  </figure>
  <p>asd</p>
</div>

JavaScript

function onCopy(event) {
  var clipboardData = event.clipboardData;
	var target = document.querySelector('figure');
  if (clipboardData && clipboardData.setData) {
    clipboardData.setData('text/html', target.innerHTML);
    clipboardData.setData('text/plain', "");
    console.log(clipboardData.getData('text/html'));
    console.log(clipboardData.getData('text/plain'));
    event.preventDefault();
  }
}

document.getElementById('editor')
  .addEventListener('copy', onCopy);