pre code
Hallo,
pre code Höhe begrenzen dann link als Auswahl zum kompletten Markieren des Codes
Basis ist folgende
https://codepen.io/elomatreb/pen/hbgxp
Wie kann ich jetzt die Höhe begrenzen und ein Link z.B. oben Links ala "Alles Markieren" einfügend an auch der komplette Code markiert wird und nicht die ganze Seite.
Ähnlich wie
https://www.phpbb.de/community/viewtopic.php?f=85&t=202089
vielen Dank
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ExecComander save </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js_webseite/jquery.js"></script>
<style>
body {
background-color:white;
padding:50px 50px;
overflow:scroll;
}
pre code,
pre .line-number {
font:normal normal 12px/14px "Courier New",Courier,Monospace;
color:black;
display:block;
}
pre .line-number {
float:left;
margin:0 1em 0 -1em;
border-right:1px solid;
text-align:right;
}
pre .line-number span {
display:block;
line-height:16px;
padding:0 .5em 0 1em;
}
#conti{
position:absolute;
left:10px;
top:10px;
}
.tool{
height:auto;
width:400px;
background:#2E3732;
color: #FFFFFF;
border-radius:10px;
position:absolute;
border:2px solid black;
font-size:16px;
z-index: 1000;
padding: 5px;
display:none;
}
::selection {
color: white;
background-color: green;}
.sele{
color: white;
background-color: green;}
textarea{
position:relative;
top:-20px;
left:-13px;
width:600px;
line-height:16px;
overflow:hidden;
}
#mark{
margin-left:45%;
}
#copyy{
position:absolute;
right:-18px;
top:28px;
z-index:2;
cursor:pointer;
}
#loschen{
position:absolute;
right:0px;
top:28px;
z-index:2;
cursor:pointer;
}
textarea{
top:0 !important;
}
</style>
</head>
<body>
<div id="conti">
<a href="#" id="mark">Auswahl Makieren und Kopieren</a>
<br><br><br>
<div>
<div id="copyy">
<img id="bild1" width="20" height="" title="Zwischenablage Löschen" src="/image/500_F_141753554_Kq1Vea3U7M3kqRxeoAJgbLl3CyXzTW2e.jpg">
<img id="bild2" width="20" height="" title="Diesen Code in der Zwischenablage Kopieren" src="/image/option-kopieren-von-dokumenten_318-48804.webp">
</div>
<pre>
<textarea id="code">
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>'
}
}
for (var i = 0; i pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>'
}
}
</textarea></pre>
</div> </div>
<span class="tool">Der Text wurde in der zwischenablage Kopiert</span>
<script>
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
$('#code').css('height',num*16+'px');
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
}
$('#bild1').click(function(){
var text=" ";
asave(text);
});
$('#mark,#bild2').click(function(){
//$('#code').select();
text=$('#code').html();
asave(text);
$(".tool").css("left",event.pageX+"-100px");
$(".tool").css("top",event.pageY+"px");
$(".tool").fadeIn("fast");
$('#code').addClass('sele');
function close(){
$(".tool").fadeOut("fast");
$('#code').removeClass('sele');
}
setTimeout(function(){close();},2000);
});
function asave(text){
var textarea = document.createElement("textarea");
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
}
})();
</script>
</body>
</html>