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

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

RXBeat

Mitglied
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
 
Werbung:
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.
 
Werbung:
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:
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>
 
Wenn du sowas suchst, wie @Senco Snifler gezeigt hat, dann würde ich es etwas anders machen.
PHP benutzt für sowas htmlEntities.
Das kann man mit JS auch erstellen.
Der Vorteil ist das du den ganzen Code in ein Array schmeißen kannst.


Link zur Lösung
 
Zuletzt bearbeitet:
Werbung:
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>
 
Zurück
Oben