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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

RXBeat

Mitglied
9 März 2019
133
0
16
43
Hab es mir wieder so einfach vorgestellt :)
Also Hi zusammen!

Was ich möchte ist einfach zu erklären.
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.
Mein Problem ist, ich muss < > und " verwenden damit der die auf der Seite als Text anzeigt und nicht als HTML. Ist extrem lästig einige umzuschreiben und bei vielen funktioniert es dann doch nicht. Entweder Ist das angezeigte falsch oder das was im zwischenspeicher ist wird auch ab und zu mal mit < > und " angezeigt.


Das wäre jetzt so mein Test. Muss gestehen, den script versteh ich nicht so wirklich aber momentan bin ich froh das der funktioniert :)
Hätte jemand kurz Zeit mir eine bessere Version zu zeigen? Am liebsten wäre es mir wenn ich einfach den HTML Code einfüge ohne großartig am text was zu verändern da es locker 30 Codes sein werden die später zu kopieren sind.

Vielen Dank
 

RXBeat

Mitglied
9 März 2019
133
0
16
43
Muss ehrlich sagen, hab von php absolut keine Ahnung. Wenn man sich sowas dann anschaut denkt man nur an Kaffee :)
weiß nicht mal wirklich wie ich anfangen sollte oder ob php bei mir funktioniert. Es gibt kein html tag so was wie <NurText></NurText>?
Hab öfters von <pre> gelesen. Da passiert überhaupt nichts.
 

basti1012

Senior HTML'ler
26 November 2017
1.608
173
63
Minden
basti1012.de
Hast du mal an sowas gedacht?
Der Code wird eingerückt, farblich dargestellt und man kann den Code so nehmen wie er ist, da brauch nichts verstümmelt zu werden.
Mit den klicken und der Code ist im Zwischenspeicher kann de glaube ich auch.
Oder der hier

In beiden fällen kann man den Code nur anzeigen, oder du erlaubst deinen Usern den Code zu ändern( nur bei ihnen auf den PC )
 
Zuletzt bearbeitet:

Senco Snifler

Neues Mitglied
3 September 2020
23
0
1
35
Also hab das damit probiert, klappt zumindest.

Gut die 30 Codes schreibts auch nur einmal, dann haste die ja :)

Vielleicht hilft es ja trotzdem :smile:

Code:
<style>
        .button2 {
        font-size: 19px;
        width: 600px;
        height: 45px;
        float: left;
        margin-top: -0.8em;
    }
    #button1 {
        opacity: 0;
        position: absolute;
        pointer-events: none;
}
    #button2 {
        opacity: 0;
        position: absolute;
        pointer-events: none;
}
</style>


<div><button class="button2" onclick="myFunction1()">&lt;button onclick=&quot;myFunction()&quot;&gt;Click me&lt;/button&gt;</button></div>
<input type="text" value="&lt;button onclick=&quot;myFunction()&quot;&gt;Click me&lt;/button&gt;" id="button1">
<script>
function myFunction1() {
  var copyText = document.getElementById("button1");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
}
</script>

<div><button class="button2" onclick="myFunction2()">&lt;a href=&quot;tel:000&quot;&lt;CALL: 000&lt;/a&gt;
    &lt;button onclick=&quot;&quot;&gt;test&lt;/button&gt;</button></div>
<input type="text" value="&lt;a href=&quot;tel:000&quot;&lt;CALL: 000&lt;/a&gt;
&lt;button onclick=&quot;&quot;&gt;test&lt;/button&gt;" id="button2">
<script>
function myFunction2() {
  var copyText = document.getElementById("button2");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
}
</script>
 

m.scatello

Senior HTML'ler
15 Februar 2017
1.588
185
63
PHP:
<?php
  $code =
  '<!DOCTYPE html>
    <html lang="de">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Titel</title>
     </head>
     <body>
        <?php highlight_string ($code); ?>
     </body>
    </html>';
?>
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>
  <?php highlight_string ($code); ?>
  </body>
</html>