JSFiddle - React, Tailwind, and code Playground

" JsFiddle test case (doesn't work) - http://jsfiddle.net/loganvolkers/koa04mju/ Without an iframe (works) - http://fiddle.jshell.net/loganvolkers/koa04mju/show/ " ,,, github.com/zeroclipboard/zeroclipboard/issues/511

by dledle2

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<!-- 
"
    JsFiddle test case (doesn't work) - http://jsfiddle.net/loganvolkers/koa04mju/
    Without an iframe (works) - http://fiddle.jshell.net/loganvolkers/koa04mju/show/
" ,,, github.com/zeroclipboard/zeroclipboard/issues/511

// -->
<button type="button" id="btn" data-clipboard-text="Text to copy">Copy</button>

<div id="logging"></div>

CSS

.zeroclipboard-is-active {
    background: red;
}
.zeroclipboard-is-hover {
    background: blue;
}

#logging{
    font-family: courier;
}
}

JavaScript

if (typeof console  != "undefined") 
    if (typeof console.log != 'undefined')
        console.olog = console.log;
    else
        console.olog = function() {};

console.log = function() {
    console.olog(arguments);
    $('#logging').append('<p>' + arguments[0] + '</p>');
    if(typeof arguments[1] !== 'undefined'){
        $('#logging').append('<pre>' + JSON.stringify(arguments[1]) + '</pre>');
    }
};
console.error = console.debug = console.info =  console.log

var log = function (e) {
    console.log("Zero Clipboard event", e);
};

console.log("Setting up handlers");
ZeroClipboard.on("ready", log);
ZeroClipboard.on("beforecopy", log);
ZeroClipboard.on("copy", log);
ZeroClipboard.on("aftercopy", log);
ZeroClipboard.on("destroy", log);
ZeroClipboard.on("error", log);

console.log("Attaching ZeroClipboard");
new ZeroClipboard(document.getElementById("btn"));
console.log("Done....");