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>