Demo

Dienstag, 3. März 2026

Eine kleine Demonstration von Textformatierungs-Möglichkeiten in HTML, die mit den Buttons in der Werkzeugleiste und den sogenannten „Snippets“ (Schnipsel) erzielt werden können.

Inhaltsverzeichnis

Tipp: Öffne diesen Artkel am besten im Editor, damit Du den Quelltext sehen kannst!

Textformatierung

Hier eine kleine Demonstration von Textformatierungs-Möglichkeiten in HTML, die mit den Buttons in der Werkzeugleiste oben (Buttons P, H2, H3 usw.) und den sogenannten "Snippets" (Schnipsel) aus dem "Einfügen..."-Menü erzielt werden können. Hierzu einfach den zu formatierenden Text markieren und den gewünschten Button anklicken oder das gewünschte Snippet auswählen.

Darüberhinaus können natürlich auch sämtliche weiteren Formatierungs-Möglichkeiten genutzt werden, die HTML zu bieten hat, indem man die gewünschten HTML-Tags direkt in den Quelltext schreibt.

Um eine Formatierung schnell wieder zu entfernen, einfach den Text markieren und den Button x anklicken. Mit jedem Klick auf den x-Button wird von außen nach innen bzw. von links nach rechts eine weitere Formatierung entfernt.

Zudem funktionieren (zumindest unter Windows) auch die Standard-Tastenkombinationen wie z.B. Strg+Z, um Änderungen rückgängig zu machen, Strg+Y, um versehentlich rückgängig gemachte Änderungen wiederherzustellen, und natürlich Strg+C, Strg+X und Strg+V zum Kopieren, Ausschneiden und Einfügen von Text über die Zwischenablage.

Grundsätzlich gilt, dass der zu formatierende Text zuvor markiert werden muss - egal ob mit der Maus oder mit der Tastatur:

• Ziehen bei gedrückt gehaltener linker Maustaste markiert einen Text zeichenweise.
• Ziehen bei gedrückt gehaltener linker Maustaste nach Doppelklick markiert einen Text wortweise.
• Doppelklick auf ein Wort markiert das ganze Wort.
• Dreifachklick in einen Absatz markiert den ganzen Absatz.
• Pfeiltaste links/rechts/oben/unten bei gedrückt gehaltener Umschalt-Taste markiert einen Text zeichen- bzw. zeilenweise.
• Pfeiltaste links/rechts bei gleichzeitig gedrückt gehaltener Umschalt- und Strg-Taste markiert einen Text wortweise.

Hier nun die Demonstration der Formatierungs-Möglichkeiten:

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Ein normaler Absatz mit Text in fett, kursiv, unterstrichen, mit Textmarker markiert, mit einer Hintergrundfarbe hinterlegt oder farbig.

Snippets

Nun die Demonstration der Snippets aus dem "Einfügen..."-Menü. Um die Funktionsweise besser zu verstehen, wird jeweils zuerst der zu markierende Text angegeben und anschließend das Endergebnis nach Einfügen des Snippets.

Einzelnes Bild

Unter dieser Rubrik sind Snippets zusammengefasst, die ein einzelnes Bild betreffen.

einfach

Fügt ein Bild in den Artikel ein. Hierzu wird zuerst die Bild-URL über die Medienverwaltung eingefügt. Wird zusätzlich ein Bildbeschreibungstext angegeben, dann erscheint dieser unter dem Bild.

Ausgangstext:

media/green-article-image.jpg Bildbeschreibung

Hier stehen die Bild-URL und der Bildbeschreibungstext in je einer Zeile.

Ergebnis nach Markieren dieser beiden Zeilen und Anwenden des Snippets:

Alternativ können Bild-URL und Bildbeschreibungstext auch in einer Zeile stehen. Sie werden dann mit | voneinander getrennt:

Ausgangstext:

media/green-article-image.jpg|Bildbeschreibung

Das Ergebnis nach Markieren und Auswählen des Snippets ist dasselbe:

Das oben Geschrieben gilt auch für alle folgenden Snippets, daher wird im weiteren Verlauf nicht wieder darauf eingegangen.

Standardmäßig ist für die eingefügten Bilder der Bildbetrachter aktiviert, erkennbar an dem "+"-Symbol unten rechst auf dem Bild. Durch Klick auf das Bild wird dieses im Bildbetrachter geöffnet. Soll der Bildbetrachter nicht aktiviert werden, dann einfach die Klasse "viewer" entfernen oder umbenennen, z.B. in "_viewer":

mit dünnem Rahmen

Fügt ein Bild in den Artikel ein und zeichnet eine dünne, hellgraue Rahmenlinie um das Bild.

Ausgangstext:

media/default-favicon.png Bildbeschreibung

Ergebnis:

mit Vorschaubild

Zeigt im Artikel ein Vorschaubild an und öffnet bei Klick darauf das Bild in voller Auflösung im Bildbetrachter. Hierzu werden zwei Bild-URLs (Vorschau-Bild und großes Bild) angegeben:

Ausgangstext:

media/dark-favicon.png media/dark-article-image.jpg Klicken zum Vergrößern

Ergebnis:

mit Link

Zeigt ein Bild mit Link an. Beim Klick auf das Bild wird der Link in einem neuen Browser-Tab geöffnet. Der Link kann z.B. ein anderes Bild, ein Artikel oder eine Website sein. Für das Snippet werden hierzu die Bild-URL, der Link und ggf. eine Bildbeschreibung angegeben:

Ausgangstext:

media/default-favicon.png / Zur Startseite

Ergebnis:

als Tabelle

Fügt ein Bild als HTML-Tabelle ein. Dies soll dem Zweck dienen, sensible Informationen wie etwa Kontaktdaten im Impressum gegen Missbrauch zu schützen. Hierzu schreibt man diese Informationen zuerst temporär in den Editor, macht einen Screenshot davon und beschneidet das Bild in einem Bildbearbeitungsprogramm auf die erforderliche Größe. Dann lädt man es in die Medien-Bibliothek hoch, fügt den Dateipfad des Bildes in den Editor ein und wendet das Snippet an. Das Bild sollte nicht zu groß sein (max. 300 x 150 Pixel), da der Browser sonst zu lange braucht, um die Grafik anzuzeigen.

Ausgangstext:

media/dd.png

Ergebnis:

Im obigen Beispiel wurde eine reine Schwarzweiß-Grafik verwendet (schwarze Schrift auf weißem Hintergrund). Damit das Bild an die Farben der Webseite angepasst wird, wurden nach Einfügen des Snippets noch die folgenden drei Parameter zum Aufruf der PHP-Funktion PrintImageTable hinzugefügt: '#FFFFFF' = die Bildfarbe, die transparent erscheinen soll (hier das Weiß des Hintergrundes); '#000000' = die Bildfarbe die durch eine andere Farbe ersetzt werden soll (hier das Schwarz der Schrift); 'var(--ContentFgColor)' = die Farbe, durch die die Schriftfarbe ersetzt werden soll (hier die Textfarbe des Artikel-Inhalts).

Anstelle des Dateipfades können auch die Bilddaten in Base64-Codierung angegeben werden, was den Vorteil hat, dass keine Bilddatei mit sensiblen Informationen auf dem Webserver liegt, die abgerufen werden könnte. Hierzu öffnet man ein neues Editor-Fenster, fügt dort den Dateipfad des Bildes ein und wendet das nachfolgend beschriebene Snippet "Base64-codieren" an. In der Vorschau rechts erscheint dann der Base-64-Code, den man mit dem "Kopieren"-Button in die Zwischenablage kopiert und dann einfach anstelle des Dateipfades in den ersten Parameter der PHP-Funktion PrintImageTable einfügt. Anschließend kann man das Bild wieder aus der Medienbibliothek löschen.

Hintergrund: Stehen Kontaktdaten im Klartext auf einer Webseite, können diese leicht von Suchmaschinen und Bots gefunden und verwertet werden. Fügt man sie als Grafik ein, sind sie etwas besser geschützt, jedoch kann auch hier die Bilddatei durch Bots gefunden und der enthaltene Text mittels OCR ausgelesen werden. Zudem müssen Kontaktinformationen im Impressum nach deutschem Recht (DSGVO) auch dann angezeigt werden, wenn im Browser die Anzeige von Bildern deaktiviert ist. Hier setzt das Snippet an: Es gibt keine Bilddatei, die gefunden oder gespeichert werden könnte, und das Bild wird auch bei deaktiviertem Laden von Bildern im Browser angezeigt.

Hundertprozentige Sicherheit gegen automatisiertes Auslesen der geschützten Informationen kann allerdings auch diese Methode nicht bieten, da Bots die Seite rendern und die Informationen weiterhin mittels OCR auslesen könnten. Um dies zu erschweren, kann man die zu schützenden Informationen zusätzlich mit Hilfe des Snippets "Absatz > Schützen" in einen geschützten Absatz stecken, der nur sichtbar wird, wenn die Seite über einen internen Link aufgerufen wurde. Damit das funktioniert, muss die Seite mittels eines geschützten Links verlinkt werden (im Editor über "[Öffnen] > Artikel auswählen > Link (geschützt) > [Einfügen]").

Base64-codieren

Dieses Snippet erzeugt aus den Bilddaten einen Base64-String, den man z.B. anstelle des Dateipfades in einem Bild-Link (z.B. <img src="data:image/png;base64,Base64-String">) oder im vorherigen Snippet "Einzelnes Bild > als Tabelle" angeben kann. Dies eignet sich für kleine Bilder wie z.B. Screenshots von Kontaktinformationen, die nicht öffentlich abrufbar sein sollen.

Dieses Snippet ist nicht dafür gedacht, in einem Artikel verwendet zu werden, sondern es ist eher so eine Art Hilfsmittel. Um es zu benutzen, öffnet man den Editor am besten in einem neuen Browser-Tab.

Ausgangstext:

media/dd.png

Ergebnis:

Wenn alles geklappt hat, ist nun im Vorschaufenster rechts das Bild zu sehen, darunter ein "Kopieren"-Button, und darunter der Base64-Code. Durch Klick auf den Button wird der Code in die Zwischenablage kopiert und kann dann im Artikel an passender Stelle eingefügt werden. Anschließend kann das neue Browser-Tab wieder geschlossen und die Bilddatei gelöscht werden.

Mehrere Bilder

Hier finden sich Snippets, die mehrere Bilder betreffen. Die Bilder müssen dazu bereits mit einem der Snippets aus der Rubrik "Einzelnes Bild" formatiert worden sein.

im „Karussell“

Die Bilder werden in einem "Bilder-Karussell" dargestellt. Durch Klick auf die Buttons oder durch "Wischen" mit dem Finger kann zwischen den Bildern "geblättert" werden.

Hierzu werden die Bilder zuerst aus der Medienverwaltung in den Editor eingefügt:

Ausgangstext:

media/warm-article-image.jpg media/default-article-image.jpg media/green-article-image.jpg media/dark-article-image.jpg

Dann wird auf jedes einzelne Bild ein Bild-Snippet angewendet (wie oben demonstriert). Zuletzt werden alle Bilder markiert und das Snippet "Bilder-Karussell" ausgewählt.

Ergebnis:

im Raster angeordnet

Hierdurch werden die Bilder in einem Raster aus quadratischen Vorschaubildern ("Thumbnails") angeordnet:

Durch Angabe folgender CSS-Variablen kann das Verhalten beeinflusst werden:

• --Size: Maximale Größe der Thumbnails.
• --Gap: Abstand zwischen den Thumbnails.
• --Radius: Eckenradius der Thumbnails.

Hier ein Beispiel mit kleineren Thumbnails (max. 100px), kleinerem Abstand und ohne Eckenradius:

Durch Entfernen oder Umbenennen der Klasse "cover" kann erreicht werden, dass die Thumbnails vollständig angezeigt werden, wobei die "freien" Bereiche dann mit einer Hintergrundfarbe ausgefüllt werden:

in Spalten nebeneinander

Hiermit können mehrere Bilder nebeneinander angeordnet werden. Auf schmalen Displays werden sie untereinander angezeigt.

Beispiel mit 2 Bildern, oben ausgerichtet:

Beispiel mit 3 Bildern, mittig ausgerichtet:

Beispiel mit 4 Bildern, unten ausgerichtet:

zentriert nebeneinander

Mit diesem Snippet werden soviele Bilder zentriert nebeneinander angeordnet, wie horizontaler Platz zur Verfügung steht. Die Bilder werden dabei in Originalgröße angezeigt, jedoch (so wie bei allen Bildern) maximal so breit wie die Artikel-Seite.

Links

Hier sind verschiedene Arten von Links zu anderen Artikeln, Websites oder anderen Zielen gruppiert.

Link intern

Interne Links werden im aktuellen Browser-Tab geöffnet und eignen sich zum Verlinken anderer Artikel. Für das Snippet wird zuerst ein Link-Text angegeben, dann die URL bzw. der Dateiname des Artikels, der auch über die Dateiverwaltung eingefügt werden kann:

Ausgangstext:

Herzlich willkommen! ueber

Ergebnis:

Herzlich willkommen!

Statt der obigen zweizeiligen Schreibweise funktioniert auch hier wieder die einzeilige Schreibweise mit | als Trenner zwischen dem Linktext und der URL:

Ausgangstext:

Sei herzlich willkommen|ueber auf meinem Blog!

Ergebnis:

Sei herzlich willkommen auf meinem Blog!

(Dies gilt auch wieder für die nachfolgenden Beispiele.)

Link extern

Externe Links werden in einem neuen Browser-Tab geöffnet und eignen sich z.B. zum Verlinken von Seiten anderer Websites:

Ausgangstext:

Mein Blog | https://beispiel.de/

Ergebnis:

Mein Blog

Button-Link intern

Ein interner Link in Form eines Buttons.

Ausgangstext:

Willkomen! | ueber

Ergebnis:

Willkomen!

Button-Link extern

Ein externer Link in Form eines Buttons.

Ausgangstext:

Mein Blog | https://beispiel.de/

Ergebnis:

Mein Blog

Artikel-Card intern

Links zu internen Artikeln werden als "Card" dargestellt.

Ausgangstext sind die Dateinamen existierender Artikel, eingefügt z.B. über die Dateiverwaltung. Nach Anwendung des Snippets kann optional ein alternativer (verkürzter) Beschreibungstext angegeben werden.

Ausgangstext:

intro help

Ergebnis:

Website-Card extern

Links zu externen Websites werden als "Card" dargestellt.

Ausgangstext sind 4 Zeilen mit folgendem Inhalt:

Titel
Dateiname (eingefügt über die Dateiverwaltung, ohne die Endung .php)
Bild-Link
Beschreibungstext

Ausgangstext:

Blog4u https://www.stefanbion.de/ein-blog-fuer-dich https://www.stefanbion.de/blog4u/media/mein-blog.jpg Ein nettes kleines Blog-System für dich!

Ergebnis:

Tooltip

Fügt einen Tooltip-Link in den Text ein. Wird der Mauszeiger darübergehalten, erscheint der Text in einem Tooltip.

Ausgangstext:

Einzelne Wörter können mit einem Tooltip|Ein Tooltip ist ein kurzer Erklärungstext, der beim Darüberhalten des Mauszeigers angezeigt wird. Zeilenumbrüche werden mittels &#10; erzeugt. versehen werden.

Ergebnis:

Einzelne Wörter können mit einem Tooltip versehen werden.

Popups

Die hier grupperten Snippets fügen einen Popup-Link ein. Dies ist ein Link, der die angegebene Web-Adresse beim Anklicken nicht sofort öffnet, sondern zuerst ein kleines Info-Fenster mit zwei Buttons anzeigt. Erst nach Klick auf den Button "Link öffnen" wird der Link dann tatsächlich geöffnet. Durch Klick auf den Button "Schließen" oder auf einen Bereich außerhalb des Popups wird das Popup-Fenster geschlossen, ohne den Link aufzurufen. Eine Variante ist das Popup ohne Link, bei der nur ein Info-Text und der Schließen-Button angezeigt wird.

Ein Link wird zu einem Popup-Link, indem ihm die CSS-Klasse "popup" zugewiesen wird:

<a class=”popup” href=”Link-Adresse” title=”anzuzeigender Text”>

Der im Popup anzuzeigende Text wird im title-Attribut des Links angegeben. Da hier keine HTML-Tags erlaubt sind, kann der Text ähnlich wie mit dem aus Foren bekannten BBCode formatiert werden:

• Textstile: [b]fett[/b], [i]kursiv[/i], [s]durchgestrichen[/s], [u]unterstrichen[/u]
• [br]Text in neuer Zeile
• [p]Text in neuerm Absatz, linksbündig
• [right]Text in neuerm Absatz, rechtsbündig
• [center]Text in neuerm Absatz, zentriert
• Link: [url=https://www.beispiel.de/]Linktext[/url]
• Bild: [img]media/bild.jpg[/img]
• Bild mit Größenangabe: [img 50%]media/bild.jpg[/img]
  (Die Angabe bezieht sich auf die Breite; es ist jede in CSS übliche Angabe möglich, z.B. auch 100px, 1em etc.)

Außerdem wird im Popup angezeigt, ob es sich um einen Link zu einer externen Seite oder zu einem internen Artikel handelt, und zu welchem Webserver der Link führt. Ist bei href ein Link zu einer Bibelstelle bei www.bibleserver.com angegeben, dann wird der Info-Text (sinvollerweise ein Bibelzitat) "kursiv und zwischen Anführungszeichen" angezeigt und darunter die Bibelstelle und die im Link verwendete Bibelübersetzung.

Popup-Link intern

Dieses Snippet fügt einen Popup-Link zu einem internen Artikel ein. Es werden 3 Angaben benötigt: Link-Text, Link-URL und der anzuzeugende Popup-Text.

Ausgangstext:

Hilfe help [img]media/green-header-image.jpg[/img][center][b]Hilfe[/b][p]Hier findest du alles Wissenswerte und noch viel mehr zu [i]Blog4u[/i].

Ergebnis:

Hilfe

Popup-Link extern

Dieses Snippet fügt einen Popup-Link zu einer externen Webseite ein. Externe Links werden in einem neuen Browser-Tab geöffnet. Es werden 3 Angaben benötigt: Link-Text, Link-URL und Popup-Text.

Ausgangstext:

Blog4u https://www.stefanbion.de/ein-blog-fuer-dich [center][b]Ein Blog für dich?[/b][p][img]https://www.stefanbion.de/media/blog4u/mein-blog.jpg[/img][p]Findest du WordPress mit all seinen Möglichkeiten und der detaillierten Benutzerverwaltung zwar ganz nett, aber es ist für dich eigentlich „Overkill“? Dann lade dir doch meine kleine Blog-Software herunter und installiere sie dir auf deinem eigenen Webspace!

Ergebnis:

Blog4u

Hier ein Beispiel mit Bibelzitat und Link zum ERF-BibleServer:

Ausgangstext:

Johannes 3,16 https://www.bibleserver.com/SLT/Johannes3,16 Denn so sehr hat Gott die Welt geliebt, dass er seinen eingeborenen Sohn gab, damit jeder, der an ihn glaubt, nicht verlorengeht, sondern ewiges Leben hat. (Johannes 3,16)

Ergebnis:

Johannes 3,16

Hinweis: Wenn ganz am Ende des Bibelzitats eine Bibelstelle (Versangabe) angegeben ist - entweder in runden Klammern oder mittels "|" oder " – " oder " — " vom Zitat getrennt -, dann wird diese Bibelstelle im Popup unterhalb des Bibelzitats aufgeführt (wie im Beispiel zu sehen).

Popup ohne Link

Dieses Snippet fügt ein einfaches Popup ohne Link ein, das nur einen Infotext und einen Schließen-Button enthält. Es eignet sich zur Anzeige kurzer Hinweistexte oder Erläuterungen, die nicht direkt im Fließtext erscheinen sollen (statt Fußnoten oder Tooltips). Technisch gesehen handelt es sich einfach um einen Link ohne href-Attribut. Es werden 2 Angaben benötigt: Link-Text und Popup-Text.

Ausgangstext:

Blatt [center][b]Was ist das für ein Blatt?[/b][center][img 40%]media/green-favicon.png[/img][p]Es handelt sich um ein vierblättriges Kleeblatt, das in der Natur nur sehr selten vorkommt (Kleeblätter sind üblicherweise dreiblättrig). Da es nur mit viel Glück zu finden ist, gilt es im Volksglauben als Glückssymbol, was aber natürlich abergläubischer Quatsch ist.

Ergebnis:

Blatt

Hervorhebungen

Snippets zum Hervorheben einzelner Zeilen oder längerer Textabschnitte.

Zitat

Ausgangstext ist bereits fertig formatierter Text:

Jeder Mensch hat in seinem Herzen ein Loch, in das nur Gott hineinpasst. Und nichts weniger als Gott kann dieses Loch ausfüllen.

Blaise Pascal (1623–1662)

Ergebnis:

Jeder Mensch hat in seinem Herzen ein Loch, in das nur Gott hineinpasst. Und nichts weniger als Gott kann dieses Loch ausfüllen.

Blaise Pascal (1623–1662)

Bibelzitat

Bei diesem Snippet werden die letzten beiden Zeilen automatisch in einen Link umgewandelt:

Ausgangstext:

Und sucht ihr mich, so werdet ihr mich finden, ja, fragt ihr mit eurem ganzen Herzen nach mir, so werde ich mich von euch finden lassen, spricht der HERR. Jeremia 29,13-14 https://www.bibleserver.com/ELB/Jeremia29%2C13-14

Ergebnis:

Und sucht ihr mich, so werdet ihr mich finden, ja, fragt ihr mit eurem ganzen Herzen nach mir, so werde ich mich von euch finden lassen, spricht der HERR.

– Jeremia 29,13-14 –

Textbox

Eine einzelne Textzeile wird in einer "Textbox" dargestellt.

Ausgangstext:

Gutes und Barmherzigkeit werden mir folgen mein Leben lang, und ich werde bleiben im Hause des HERRN immerdar.

Ergebnis:

Gutes und Barmherzigkeit werden mir folgen mein Leben lang, und ich werde bleiben im Hause des HERRN immerdar.

Tabelle

Text wird in Tabellenform mit Zeilen und Spalten dargestellt.

Ausgangstext:

Spalte A | Spalte B | Spalte C Zelle A1 | Zelle B1 | Zelle C1 Zelle A2 | Zelle B2 | Zelle C2 Zelle A3 | Zelle B3 | Zelle C3 Tabellentitel

Ergebnis:

Spalte A	Spalte B	Spalte C
Zelle A1	Zelle B1	Zelle C1
Zelle A2	Zelle B2	Zelle C2
Zelle A3	Zelle B3	Zelle C3

Als Trenner eignen sich statt | auch Tabulatoren:

Ausgangstext:

Spalte A Spalte B Spalte C Zelle A1 Zelle B1 Zelle C1 Zelle A2 Zelle B2 Zelle C2 Zelle A3 Zelle B3 Zelle C3 Tabellentitel

Code

Formatiert den Text als Programmcode. Zeilenumbrüche bleiben dabei erhalten.

Ausgangstext:

function Next(amount) { var i = imageIndex; i += amount; if (i >= imageCount[name]) i = (amount === 1 ? 0 : imageCount[name] - 1); if (i !== imageIndex) { imageIndex = i; MoveImage(0, -1, function() { Viewer(null, function() { MoveImage(1, 0); }); }); } }

Ergebnis:

function Next(amount)
{
	var i = imageIndex;
	i += amount;
	if (i >= imageCount[name])
		i = (amount === 1 ?  0 : imageCount[name] - 1);
	if (i !== imageIndex)
	{
		imageIndex = i;
		MoveImage(0, -1, function()
		{
				Viewer(null, function() { MoveImage(1, 0); });
		});
	}
}

Einbettungen

Hiermit können Medien (Audio, Video) oder Karten in den Artikel eingebettet werden.

Audioclip

Stellt einen Audio-Player zum Abspielen einer Audio-Datei dar. Die verwendete MP3-Datei wird aus der Medienverwaltung eingefügt (ggf. zuvor dort hochladen). Natürlich kann auch ein externer Link angegeben werden. Es wird immer nur ein Audioclip zur selben Zeit abgespielt, d.h. wenn die Wiedergabe eines Audioclips gestartet wird, so wird die Wiedergabe des aktuell abgespielten Audioclips gestoppt.

Ausgangstext:

media/Froschkonzert.mp3 Froschkonzert

Ergebnis:

Audioclip für Playlist

Im Unterschied zum einfachen Audioclip (s.o.) ist dieser Audioclip Teil einer Playlist. Sind mehrere solcher Audioclips auf der Seite vorhanden, werden diese der Reihe nach abgespielt. Der aktuell abgespielte Audioclip wird dabei optisch hervorgehoben.

Ausgangstext:

media/Froschkonzert.mp3 Froschkonzert

Ergebnis:

Froschkonzert

Videoclip

Stellt einen Video-Player zum Abspielen einer Video-Datei dar. Die verwendete MP4-Datei wird aus der Medienverwaltung eingefügt (ggf. zuvor dort hochladen). Natürlich kann auch ein externer Link angegeben werden.

Ausgangstext:

media/wolken.mp4 Wolken

Ergebnis:

IFRAME (Video, Karte, ...)

Fügt externen Inhalt (z.B. YouTube-Video, GoogleMaps-Karte) mittels eines IFRAME in den Artikel ein.

Beispiel: YouTube-Video einbetten

Den Einbettungs-Code erhält man über die "Teilen"-Funktion auf der YouTube-Seite zu einem Video.

Ausgangstext:

Lied: I Speak Jesus (Here Be Lions)

Ergebnis:

In dem obigen Einbettungs-Code (<iframe ...) wurde das Attribut "src" nachträglich per Hand durch "data-src" ersetzt. Hierdurch wird das Video nicht sofort geladen, sondern datenschutzkonform erst nach Klick auf den Button.

Das Platzhalter-Bild, das anstelle des YouTube-Players angezeigt wird, ist ein Screenshot, der unter dem Dateinamen "FpGYImM_VeM.jpg" in die Medien-Bibliothek hochgeladen wurde, wobei "FpGYImM_VeM" der YouTube-Video-ID entspricht, wie sie in der YouTube-URL im Einbettungscode hinter "embed/" angegeben ist. Alternativ kann auch ein beliebiger anderer Bild-Dateiname in dem Attribut "data-img" angegeben werden (Beispiel: data-img="video.png").

Der Link "Datenschutzhinweise" führt zum Abschnitt mit der id "#external-content" der Datenschutzerklärungs-Seite. Der Dateiname der Datenschutzerklärung wird aus der Systemdatei "lib/config.php" gelesen. Standardmäßig lautet er "datenschutz". Wenn die Seite anders benannt wurde, muss er daher auch in der config.php entsprechend angepasst werden (oder alternativ über das Setup-Script).

Beispiel: GoogleMaps-Karte einbetten

Den Einbettungs-Code für die Karte erhält man über die "Teilen"-Funktion im Menü auf der GoogleMaps-Seite.

Ausgangstext:

Google-Maps-Karte

Ergebnis:

In dem obigen Einbettungs-Code (<iframe ...) wurde das Attribut "src" nachträglich per Hand durch "data-src" ersetzt. Hierdurch wird die Karte nicht sofort geladen, sondern datenschutzkonform erst nach Klick auf den Button.

Das Platzhalter-Bild, das anstelle der echten Karte angezeigt wird, ist ein Screenshot, der unter dem Dateinamen "gm-westpark.jpg" in die Medien-Bibliothek hochgeladen wurde und anschließend in dem manuell hinzugefügten Attribut "data-img" angegeben wurde (data-img="media/gm-westpark.jpg").

Absatz

Snippets zum Formatieren einer oder mehrerer Zeilen.

Absatztrenner (* * *)

Absatztrenner eignen sich als optische Trenner zwischen zwei Absätzen, z.B. um einen Nachsatz zu schreiben.

* * *

Hier folgt dann der abgetrennte Absatz...

Inhaltsverzeichnis

Anhand der im Artikel enthaltenen Überschriften mit ID wird automatisch ein Inhaltsverzeichnis generiert. Die IDs werden dabei als Sprungziele verwendet. Als Beispiel soll der vorliegende Demo-Artikel dienen, in dem die Überschriften mit IDs versehen sind.

Inhaltsv. aufklappbar

Wie zuvor, aber zum Aufklappen. Als Beispiel soll der vorliegende Demo-Artikel dienen, in dem die Überschriften mit IDs versehen sind. Ein Anwendungsbeispiel für das Snippet befindet sich ganz oben am Beginn dieses Artikels. Initial ist das Inhaltsverzeichnis aufgeklappt. Lässt man das Attribut "open" weg, ist das Inhaltsverzeichnis initial zugeklappt.

Bereich aufklappbar

Ein Abschnitt ist initial versteckt und kann durch Anklicken des Titels aufgeklappt werden:

Ausgangstext:

Details

Es war einmal...

Und wenn sie nicht gestorben sind...

Ergebnis:

Details

Es war einmal...

Und wenn sie nicht gestorben sind...

Aufzählung (● ● ●)

Die Zeilen werden als Listenpunkte dargestellt.

Ausgangstext:

Punkt 1 Punkt 2 Punkt 3

Ergebnis:

• Punkt 1
• Punkt 2
• Punkt 3

Es können auch weitere Einrückungen vorgenommen werden. Dies muss aber manuell gemacht werden:

• Punkt 1
• Punkt 2
  • Unterpunkt 1
  • Unterpunkt 2
  • Unterpunkt 3
• Punkt 3

Aufzählung (1. 2. 3.)

Die Zeilen werden als numerierte Aufzählungspunkte dargestellt.

Ausgangstext:

Punkt 1 Punkt 2 Punkt 3

Ergebnis:

1. Punkt 1
2. Punkt 2
3. Punkt 3

Auch hier können durch manuell eingegebene HTML-Tags weitere Einrückungen erreicht werden:

1. Punkt 1
2. Punkt 2
   1. Unterpunkt 1
   2. Unterpunkt 2
   3. Unterpunkt 3
3. Punkt 3

Einzelne Fußnote (*)

Fügt eine einzelne "Sternchen"-Fußnote in den Artikel ein.

Ausgangstext:

Name aus Datenschutzgründen geändert.

Ergebnis:

Hinweis:

• Name aus Datenschutzgründen geändert.

Mehrere Fußnoten (1. 2. 3.)

Fügt mehrere numerierte Fußnoten in den Artikel ein.

Ausgangstext:

Grid Layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen. Dabei können Elemente beliebig innerhalb eines Rasters platziert werden, wenn gewünscht, auch übereinander. Grid Layout wird in allen modernen Browsern (und mit vendor-prefix -ms- selbst in IE10- IE11) unterstützt.

Ergebnis:

Hinweise:
1. Grid Layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.
2. Dabei können Elemente beliebig innerhalb eines Rasters platziert werden, wenn gewünscht, auch übereinander.
3. Grid Layout wird in allen modernen Browsern (und mit vendor-prefix -ms- selbst in IE10- IE11) unterstützt.

Fußnoten können auch mit Links zum Hin- und Zurückspringen versehen werden, wie etwa in diesem Beispiel der Hinweis auf Pseudonyme*:

Hinweis:
• Name aus Datenschutzgründen geändert.

Schützen

Mit diesem Snippet kann Text vor allzu leichtem Auffinden und Abgreifen durch Suchmaschinen und Bots geschützt werden. Hierzu muss die Seite im Editor über "[Öffnen] > Artikel auswählen > Link (geschützt) > [Einfügen]" verlinkt werden. Diese spezielle interne Verlinkungsmethode erkennt, ob die Seite über einen internen Link aufgerufen wurde oder nicht. Wenn ja, wird der Text des ersten angegebenen Textbausteins angezeigt; wenn nein, dann der des zweiten. Dieses Snippet eignet sich in Kombination mit dem Snippet "Einzelnes Bild > als Tabelle" z.B. dazu, Kontaktinformationen ein einem Impressum zu schützen.

Zuerst erstellt man zwei Textbausteine und fügt dann deren Dateipfade über die Dateiverwaltung in den Editor ein. Dann markiert man beide Dateipfade und wendet das Snippet an.

Ausgangstext:

textblocks/beispiel-text-geschuetzt.htm textblocks/beispiel-text-ungeschuetzt.htm

Ergebnis:

Warning: include(textblocks/beispiel-text-ungeschuetzt.htm): Failed to open stream: No such file or directory in /mnt/web008/d0/29/556429/htdocs/test.gottsucher.de/demo.php on line 915 Warning: include(): Failed opening 'textblocks/beispiel-text-ungeschuetzt.htm' for inclusion (include_path='.:/opt/RZphp84/includes') in /mnt/web008/d0/29/556429/htdocs/test.gottsucher.de/demo.php on line 915

Zeile

Kein automat. Umbruch

Wenn Textzeilen zuerst an "Sollbruchstellen" umgebrochen werden sollen, dann können die zusammengehörigen Teile zwischen diesen Sollbruchstellen mit diesem Snippet formatiert werden:

Ausgangstext:

Erster zusammengehöriger Teil, zweiter zusammengehöriger Teil, dritter zusammengehöriger Teil.

Ergebnis:

Erster zusammengehöriger Teil, zweiter zusammengehöriger Teil, dritter zusammengehöriger Teil.

Kommentar

Snippets zum Auskommentieren von Teilen des Quelltexts.

Inline

Hiermit kann ein oder mehrere Wörter innerhalb einer Zeile auskommentiert werden.

Ausgangstext:

Dies ist nun schon das erste zweite Mal.

Ergebnis:

Dies ist nun schon das zweite Mal.

Block

Hiermit können eine oder mehrere Zeilen auskommentiert werden.

Ausgangstext:

Erste Zeile.

Zweite Zeile

Dritte Zeile.

Vierte Zeile.

Ergebnis:

Erste Zeile.

Vierte Zeile.

Kontakt-Link

Fügt einen Link zum Kontaktformular in den Artikel ein. Betreff und Nachrichtentext können vorbelegt werden.

einfach

Öffnet das Kontaktformular.

Ausgangstext:

Kontaktformular

Ergebnis:

Kontaktformular

mit Betreff

Öffnet das Kontaktformular mit vorausgefüllter Betreffzeile.

Ausgangstext:

Kontaktformular|Bestellung

Ergebnis:

Kontaktformular

mit Betreff + Nachricht

Öffnet das Kontaktformular mit vorausgefüllter Betreffzeile und Nachrichtentext.

Ausgangstext:

Kontaktformular Bestellung Nachricht Zeile 1{}Nachricht Zeile 2{}Nachricht Zeile 3{}{}Nachricht Zeile 5{}

Ergebnis:

Kontaktformular

Hinweis: Bei mehrzeiligem Nachrichtentext dient {} als Zeilenumbruch.

Übersetzung

Snippets zum automatisierten Übersetzen des Artikels oder verlinkter Seiten.

Mehrsprachiger Artikel

Dieses Snippet ermöglicht die Erstellung zweisprachiger Artikel mit automatischer Umschaltung zwischen diesen zwei Sprachen: (1) Einer nicht-englischen Standardsprache wie z.B. Deutsch (de), und (2) Englisch (en) für alle Benutzer mit abweichender Spracheinstellung.

Weitere Hinweise und Beispiele zur Verwendung werden nach Einfügen des Snippets angezeigt.

Link

Dieses Snippet fügt einen Link ein, der das Linkziel in "Google Translate" öffnet und in eine Zielsprache übersetzt. Die zu verwendende Quellsprache kann im Attribut x-data-translate-from des Snippets angegeben werden (z.B. "de" für Deutsch). Wird es leergelassen, dann wird die im "lang"-Attribut des HTML-Dokuments angegebene Sprache verwendet. Die Zielsprache ist die im Browser des Benutzers eingestellte Sprache (z.B. "en" für Englisch). Die Weiterleitung an "Google Translate" erfolgt nur, wenn Quell- und Zielsprache voneinander abweichen.

Ausgangstext:

Mehr dazu in der Hilfe|help#setup.

Ergebnis:

Mehr dazu in der Hilfe.

Diese Seite übersetzen

Dieses Snippet fügt einen Button zum Übersetzen der Seite mit "Google Translate" ein. Die zu verwendende Quellsprache kann im Attribut x-data-translate-from des Snippets angegeben werden (z.B. "de" für Deutsch). Wird es leergelassen, dann wird die im "lang"-Attribut des HTML-Dokuments angegebene Sprache verwendet. Die Zielsprache ist die im Browser des Benutzers eingestellte Sprache (z.B. "en" für Englisch). Der Button ist nur sichtbar, wenn Quell- und Zielsprache voneinander abweichen.

Ohne markierten Text wird ein Standard-Linktext verwendet (nur sichtbar, wenn die Sprache des Artikels von der Browser-Sprache abweicht):

Wenn statt des Standard-Linktextes ein eigener Linktext für den Button angezeigt werden soll, kann dieser innerhalb des <p>-Tags angegeben werden. Beim Einfügen des Snippets wird hierfür der markierte Text verwendet:

Ausgangstext:

Übersetzen

Ergebnis (nur sichtbar, wenn die Sprache des Artikels von der Browser-Sprache abweicht):

Übersetzen

Sonderzeichen

Diese Snippets dienen zum schnellen Zugriff auf einige häufiger benötigte Sonderzeichen wie typographische Anführungszeichen oder den langen Gedankenstrich, die nicht auf der normalen Computertastatur zu finden sind. Einige der Sonderzeichen-Snippets sind mit einer Tastenkombination versehen.