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

[RXBeat]

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.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

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

 

[Gelöschtes Mitglied 36401]

Wenn du PHP zur Verfügung hast, dann lass PHP sich um das Anzeigen von HTML-Code kümmern:

PHP: htmlspecialchars - Manual

www.php.net

PHP: highlight_string - Manual

www.php.net

 

[RXBeat]

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]

Hast du mal an sowas gedacht?

Ace - The High Performance Code Editor for the Web

ace.c9.io

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

Elegant Syntax Highlighter In JavaScript - EnlighterJS | CSS Script

EnlighterJS is a powerful Syntax Highlighter that supports more than 40 languages and comes with 12 elegant themes.

www.cssscript.com

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 )

 

[Senco Snifler]

Also hab das damit probiert, klappt zumindest.

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

Vielleicht hilft es ja trotzdem

<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>

 

[basti1012]

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

 

[Gelöschtes Mitglied 36401]

<?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>