HTML Text als HTML Text anzeigen und per klick in zwischenspeicher kopieren

Ich möchte Kollegen HTML Codes zur Verfügung stellen. Soll als HTML Quellcode angezeigt werden und wenn man drauf klickt ist der Text im Zwischenspeicher.

Der hier verwendete Code

<style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i); body { background: #f1f2f6; font-family: "Roboto", sans-serif; margin: 0; padding: 0; position: relative; line-height: normal; } pre{ height:300px; width:80vw; border:1px solid black; overflow:auto; } #info{ height:100px; width:300px; padding:10px; font-size:30px; boder:1px solid red; background:black; color:white; position:fixed; top:0; right:0; display:none; } pre:hover{ cursor:pointer; } pre { padding: 50px 10px 10px 10px; margin: .5em 0; white-space: pre; word-wrap: break-word; overflow: auto; background-color: #2c323c; position: relative; border-radius: 4px; max-height: 500px; } pre::before { font-size: 16px; content: attr(title); position: absolute; top: 0; background-color: #eee; padding: 10px; left: 0; right: 0; color: #fff; text-transform: uppercase; display: block; margin: 0 0 15px 0; font-weight: bold; } pre::after { content: 'Click ,and copy to clipboard'; padding: 2px 10px; width: auto; height: auto; position: absolute; right: 8px; top: 8px; color: #fff; line-height: 20px; transition: all 0.3s ease-in-out; } pre:hover::after { opacity: 0; top: -8px; visibility: visible; } code { font-family: Consolas,Monaco,' Andale Mono','Courier New',Courier,Monospace; line-height: 16px; color: #88a9ad; background-color: transparent; padding: 1px 2px; font-size: 12px; } pre code { display: block; background: none; border: none; color: #e9e9e9; direction: ltr; text-align: left; word-spacing: normal; padding: 0 0; font-weight: bold; } pre[data-codetype='CSSku']:before { background-color: #00a1d6; } pre[data-codetype='HTMLku']:before { background-color: #3cc888; } pre[data-codetype='JavaScriptku']:before { background-color: #75d6d0; } </style> Klick auf den Code um ihn zu kopieren <h4>Code1</h4> <pre title="HTML" data-codetype="HTMLku"><code id="codeblock1"></code></pre> <h4>Code2</h4> <pre title="HTML" data-codetype="HTMLku"><code id="codeblock2"></code></pre> <div id="info"></div> <script> var code=[`<button onclick="myFunction()">Click me</button>`,`<style> pre{ height:300px; margin-top:100px; width:80vw; border:1px solid black; overflow:auto; } #info{ height:100px; width:300px; padding:10px; font-size:30px; boder:1px solid red; background:black; color:white; position:fixed; top:0; right:0; display:none; } pre:hover{ cursor:pointer; } </style><main> Klick auf den Code um ihn zu kopieren <pre id="codeblock1"></pre> <pre id="codeblock2"></pre> <div id="info"></div></main>`]; function htmlEntities(str) { return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); } document.getElementById('codeblock1').innerHTML=htmlEntities(code[0]); var cod1=document.getElementById('codeblock2').innerHTML=htmlEntities(code[1]); var pre=document.querySelectorAll('pre'); pre.forEach(function(a,index){ a.addEventListener('click',function(){ var val=document.createElement('input'); val.type="text"; val.value=code[index]; var inf=document.getElementById('info'); inf.innerHTML='Code '+(index+1)+' kopiert'; inf.style.display='block'; setTimeout(function(){ inf.style.display='none'; },1500) document.getElementsByTagName('body')[0].append(val); val.select(); document.execCommand("copy"); val.remove(); }) }) </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!