JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<p><button class="js-copy-json-btn">Copy JSON to clipboard</button></p>
<p><textarea class="js-test-textarea" cols="50" rows="10">Paste here to confirm clipboard contents:</textarea></p>

JavaScript

function copyStringToClipboard(text) {
  var textArea= document.createElement("textarea");
  // See http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
  textArea.style.position= 'fixed';
  textArea.style.top=textArea.style.left=textArea.style.padding= 0;
  textArea.style.width=textArea.style.height= '2em';
  textArea.style.border=textArea.style.outline=textArea.style.boxShadow= 'none';
  textArea.style.background= 'transparent';
  textArea.value= text;
  document.body.appendChild(textArea);
  textArea.select();
  try {
    var successful= document.execCommand('copy');
    var msg= successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
  document.body.removeChild(textArea);
}

var copyBobBtn= document.querySelector('.js-copy-json-btn');
copyBobBtn.addEventListener('click', function(event) {
  copyStringToClipboard('{ "glossary": { "title": "example glossary", "GlossDiv": { "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Standard Generalized Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "A meta-markup language, used to create markup languages such as DocBook.", "GlossSeeAlso": ["GML", "XML"] }, "GlossSee": "markup" } } } } }');
});