i

HTML Viewer

Mit diesem Modul kann ein HTML Viewer eingebunden werden. Damit ist es möglich HTML Code live im Browser übersetzen und anzeigen zu lassen. Es wird auch CSS unterstützt.

Das Modul einbinden

Um das Modul nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features erfolgen (siehe auch Abschnitt "Javascript"):

Beispielquelltext für die Einbindung des HTML Viewers über das Meta-Tag features

Das Modul verwenden

Die Verwendung des Moduls wird über einen HTML-Tag gesteuert. Er wird an der gewünschten Stelle eingefügt:

<div class="html-viewer"></div>

Alternativ kann auch eine Datei im Projektordner abgelegt und eingebunden werden:

<div class="html-viewer" data-config='{"filenameHTML":"test.html"}'></div>

Konfiguration vornehmen

data-config - Übergabe der Konfiguration im JSON Format, Reihenfolge beliebig

  • css Kann auf true gesetzt werden, um ein extra Eingabefeld für den CSS-Code zu erhalten. Es ist aber auch möglich ohne CSS-Feld im HTML Eingabefeld CSS Code über den Tag <style></style> einzubinden.
  • filenameHTML Hier kann eine Datei übergeben werden, welche in das Feld für den HTML Body Quelltext eingefügt wird.
  • filenameCSS Hier kann eine Datei übergeben werden, welche in das Feld für den CSS Quelltext eingefügt wird. Dafür muss css auf true gesetzt werden.

Beispiel

<div class="html-viewer" ></div>

Beispiel mit zusätzlichem CSS Eingabefeld

<div class="html-viewer" data-config='{"css": true}'></div>

Beispiel mit eingebundenen Quelltext-Dateien

<div class="html-viewer" data-config='{"css": true, "filenameHTML": "test-quelltext.html", "filenameCSS":"test-quelltext.css"}'></div>

Suche

v
15.6.3.3.9
schuljahr.inf-schule.de/aktuell/infschule/dokumentation/kapitel-erstellen/interaktive-elemente/html-viewer
schuljahr.inf-schule.de/aktuell/15.6.3.3.9

Rückmeldung geben