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"):

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. Alternativ kann auch ein Array angegeben werden (siehe Beispiele), in diesem Fall wird die erste Datei im Array eingebunden und die anderen stehen über ein select zur Auswahl.
• 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. Alternativ kann auch ein Array angegeben werden (siehe Beispiele), in diesem Fall wird die erste Datei im Array eingebunden und die anderen stehen über ein select zur Auswahl.
• responsive Kann auf true gesetzt werden, um dem User die Möglichkeit zu geben, die Größe des Viewers anzupassen.
• upload Kann auf true gesetzt werden, um dem User die Möglichkeit zu geben, eigene Bilder hochzuladen. Die Bilder werden dabei nicht wirklich hochgeladen, sondern im LocalStorage des Benutzers gespeichert.
• singleColumn Kann auf true gesetzt werden, damit werden die Elemente (Quelltext CSS, Quelltext HTML Body und Vorschau Webseite) bei jeder Bildschirmbreite untereinander in einer Spalte angezeigt (empfehlenswert für den Modus responsive, damit man mehr Spielraum für die Breite hat).

Im Quelltext wird bei Verlinkungen aus dem Tag <a href="...">Link</a> automatisch der veränderte Tag <a target="_blank" href="...">Link</a> , damit die Links aus dem iFrame in einem neuen Tab oder Fenster geöffnet werden.

Außerdem können auch Bilder eingefügt werden, dabei muss bei src="..." nur der Dateiname eingefügt werden und das Bild im gleichen Ordner liegen, der absolute Pfad auf inf-schule wird automatisch davor ergänzt.

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-css.css"}'></div>

Beispiel mit eingebundenen Quelltext-Dateien und Modus Responsive

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

Beispiel mit Upload-Funktion

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

Beispiel mit mehreren CSS und HTML Dateien

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

Beispiel für zwingende Single Column Darstellung

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