Hinzufügen von benutzerdefinierten BBCodes

Geschrieben von: Crizzo
Veröffentlicht am: 10.02.2020 11:59
zuletzt geändert: 28.08.2020 14:58
Zugriffe: 11535

Beschreibung: Dieser Artikel erklärt euch, wie ihr eigene benutzerdefinierte BBCodes erstellen könnt.

Kategorie: Allgemeine Funktionen

Link zu diesem Artikel: Alles auswählen

[url=https://www.phpbb.de/kb/viewarticle?a=30]Knowledge Base - Hinzufügen von benutzerdefinierten BBCodes[/url]
Hinzufügen von benutzerdefinierten BBCodes

Dieser Artikel erklärt euch, wie ihr eigene benutzerdefinierte BBCodes erstellen könnt. Standardmäßig ist es in phpBB3 möglich, über den Administrations-Bereich (ACP) eigene BBCodes zu ergänzen. Eine zusätzliche Modifikation ist nicht nötig.

BBCodes

Um benutzerdefinierte BBCodes hinzuzufügen geht ihr bitte ins ACP eures Forums, dort in den "Tab: Beiträge" und links an der Seite zu "BBCodes". Danach nur noch rechts auf den Button "BBCodes hinzufügen".
  • BBCode-Benutzung
    • Hier wird eingestellt, wie der BBCode benutzt wird
  • HTML-Ersetzung
    • Hier kannst du die Standard-HTML-Ersetzung eingeben
  • Tipp-Anzeige:
    • Hier wird der Text eingegeben, der erscheinen soll, wenn der Mauszeiger sich auf der Schaltfläche befindet
  • Einstellungen:
    • Wenn das Häkchen beim Verfassen eines Beitrags anzeigen gesetzt ist, wird der erstellte BBCode auch angezeigt. Es ist aber auch möglich, das Häkchen wegzulassen und den BBCode zu verstecken. So wird der im ACP erstellte BBCode zwar nicht angezeigt, ist aber dennoch benutzbar.
Außerdem können verschiedene Tokens (Platzhalter für Benutzereingaben) benutzt werden:
  • {TEXT} Jeder Text, einschließlich fremder Zeichen, Ziffern usw. Du solltest dieses Token nicht innerhalb von HTML-Tags verwenden, sondern IDENTIFIER oder SIMPLETEXT vorziehen.
  • {SIMPLETEXT} Zeichen des lateinischen Alphabets (A-Z), Ziffern, Leerzeichen, Komma, Punkt, Minus, Plus und Unterstrich
  • {IDENTIFIER} Zeichen des lateinischen Alphabets (A-Z), Ziffern, Bindestrich und Unterstrich
  • {NUMBER} Ziffernfolgen
  • {EMAIL} Eine gültige E-Mail-Adresse
  • {URL} Eine gültige URL eines beliebigen Protokolls (http, ftp usw. — kann nicht für JavaScript-Exploits verwendet werden). Falls nicht angegeben, wird „http://“ vorangestellt.
  • {LOCAL_URL} Eine lokale URL. Muss relativ zur Themenansicht angegeben werden; Protokoll und Domain darf nicht vorangestellt werden.
  • {RELATIVE_URL} Eine relative URL. Kann verwendet werden, um Teile einer URL zu prüfen. Achtung: auch eine vollständige URL ist eine gültige relative URL. Wenn relative URLs zur Adresse des Boards verwendet werden sollen, sollte der LOCAL_URL-Token verwendet werden(ab der Version 3.0.12).
  • {COLOR} Eine HTML-Farbe. Es kann entweder der hexadezimale Wert (z. B. #FF1234) oder ein CSS-Farbwert wie z. B. fuchsia oder InactiveBorder angegeben werden.
Jetzt wollen wir euch anhand eines einfachen BBCode zeigen, wie ihr Texte mit Farben benutzen könnt. Als Beispiel nehmen wir die Farbe Grau (engl. grey).
Klickt dazu, den schon oben beschriebenen Button "BBCodes hinzufügen", ACP -> Tab: Beiträge -> BBCodes -> BBCodes hinzufügen

Danach bei
BBCode-Benutzung:

Code: Alles auswählen

[grey]{TEXT}[/grey]
HTML-Ersetzung:

Code: Alles auswählen

<span style="color: grey;">{TEXT}</span>
Tipp-Anzeige:
Das ist euch überlassen, wir nehmen als Beispiel

Code: Alles auswählen

Graue Textfarbe: [grey]{TEXT}[/grey]
eingeben. Dann nur noch bei beim Verfassen eines Beitrags anzeigen das Häkchen setzen und Absenden. Euer erster benutzerdefinierter BBCode ist fertig, herzlichen Glückwunsch!
Bitte denkt daran, falls ihr bei der BBCode Benutzung einen anderen Token benutzt als "{TEXT}", z.B. "{SIMPLETEXT}", diesen dann auch entsprechend in der HTML-Ersetzung mit "{SIMPLETEXT}" anzupassen.

Eine kleine Liste der meist benutzten BBCodes:

Diese könnt ihr einfach kopieren und bei euch im ACP bei BBCodes einfügen.

YouTube BBCode


BBCode-Benutzung:

Code: Alles auswählen

[youtube]{IDENTIFIER}://{SIMPLETEXT1}youtube.com/watch?v={SIMPLETEXT2}[/youtube]
HTML-Ersetzung:

Code: Alles auswählen

<object width="425" height="350"><param name="movie" value="{IDENTIFIER}://{SIMPLETEXT1}youtube.com/v/{SIMPLETEXT2}"></param><param name="wmode" value="transparent"></param><embed src="{IDENTIFIER}://{SIMPLETEXT1}youtube.com/v/{SIMPLETEXT2}" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
Verwendungsbeispiel:

Code: Alles auswählen

[youtube]YouTube video ID string here[/youtube]
Tipp-Anzeige:

Code: Alles auswählen

Tragen Sie hier die Video-ID-String ein, die Video-ID-String ist der Teil nach v = in der URL

Texte rechts, links, zentriert oder als Blocksatz ausrichten

BBCode-Benutzung:

Code: Alles auswählen

[text={IDENTIFIER}]{TEXT}[/text]
HTML-Ersetzung:

Code: Alles auswählen

<p style="text-align: {IDENTIFIER};">{TEXT}</p>
Verwendungsbeispiel:

Code: Alles auswählen

[text=center]centered text[/center]
Zur Auswahl stehen: right, left, center, justify. "left" ist der Standardwert, geht auch, ergibt aber keinen Sinn. Alle anderen Verwendungen werden vom Browser ignoriert.

Farbiger Hintergrund

*Notiz: Der farbige Hintergrund ist nur in der Zeile in dem Text vorhanden.
BBCode-Benutzung:

Code: Alles auswählen

[background={COLOR}]{TEXT}[/background]
HTML-Ersetzung:

Code: Alles auswählen

<span style="background-color: {COLOR};">{TEXT}</span>
Verwendungsbeispiel:

Code: Alles auswählen

[background=yellow]text on a yellow background[/background]

Schriftarten

BBCode-Benutzung:

Code: Alles auswählen

[font={SIMPLETEXT}]{TEXT}[/font]
HTML-Ersetzung:

Code: Alles auswählen

<span style="font-family: {SIMPLETEXT};">{TEXT}</span>
Verwendungsbeispiel:

Code: Alles auswählen

[font=Georgia]Georgia font[/font]

Durchgestrichener Text

BBCode-Benutzung:

Code: Alles auswählen

[s]{TEXT}[/s]
HTML-Ersetzung:

Code: Alles auswählen

<span style="text-decoration: line-through;">{TEXT}</span>
Verwendungsbeispiel:

Code: Alles auswählen

[s]strikethrough text[/s]

glühender Text


BBCode-Benutzung:

Code: Alles auswählen

[glow={COLOR}]{TEXT}[/glow]
HTML-Ersetzung:

Code: Alles auswählen

<span class="glow" style="display: inline; padding: 0.7em; color: #000000; text-shadow: 0 0 1em {COLOR}, 0 0 1em {COLOR}, 0 0 1em {COLOR};">{TEXT}</span>
Verwendungsbeispiel:

Code: Alles auswählen

[glow=yellow]glow text[/glow]

Subscript

*Notiz: nützlich für chemische Gleichungen
BBCode-Benutzung:

Code: Alles auswählen

[sub]{TEXT}[/sub]
HTML-Ersetzung:

Code: Alles auswählen

<sub style="vertical-align: sub;">{TEXT}</sub>
Verwendungsbeispiel:

Code: Alles auswählen

H[sub]2[/sub]O

Superscript

*Notiz: nützlich für mathematischen Text/Formeln.
BBCode-Benutzung:

Code: Alles auswählen

[super]{TEXT}[/super]
HTML-Ersetzung:

Code: Alles auswählen

<sub style="vertical-align: super;">{TEXT}</sub>
Verwendungsbeispiel:

Code: Alles auswählen

x[super]3[/super]
Das war eine kleine Liste, mit den am meisten benutzten BBCodes. Nun wünschen wir euch viel Spaß damit!