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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
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, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
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>