Referenz Formatieren mit BBCode

!	Nachricht von: madu
	in Arbeit

Referenzhandbuch: Formatieren mit dem modifizierten BBCode

INHALT

Der Standard BBCode
die Tags der in der Advanced BBCode Box enthaltenen ABBC3 Bibliothek
Einfache Tabellen erstellen
unsere eigenen BBCode-Tags (maduTag)
Formatvorlage für Artikel in der Knowledge Base
Schriften und Sonderzeichen]
Schriftart
Schriftgrösse
Sonderzeichen

Zum Formatieren der Beiträge in den Foren und Artikel für die Knowledge Base stellt uns der Editor von phpBB sehr dürftige Möglichkeiten mit ein paar wenigen BBCode Tags zur Verfügung (die vorhandenen sind zum Chatten optimiert).

Tags sind Markierungen welche den Start und das Ende einer Formatierung kennzeichnen (Anfang und Ende-Tag im BBCode, z.B. um ein Wort fett darzustellen):

Code: Alles auswählen

[b]Wort Fett[/b]

Mit der der installierten Extension Markdown (add on) steht uns zusätzlich eine weitere einfache Auszeichnungssprache zur Verfügung, welche ich für die Posts in den Foren empfehle. Diese kann allerdings nicht für alle Texte die wir auf unserer Plattform erstellen wollen verwendet werden (z.B. nicht für die Seiten in unserer Knowledge Base). Mehr zur Anwendung von Markdown in deinen Postings findest du hier >

Der Standard BBCode

Der Standard BBCode unterstützt

[]die Formatierung von Text als Fett, Italic und unterstrichener Text
[*]eine Änderung der Textfarbe und -grösse (z.B.klein, wobei die "=Zahl" als % zur Standardgrösse gilt)
[]das Hinterlegen von Hyperlinks (keine mailto) auf ein Wort oder Textabschnitt
[*]unsortierte oder sortierte Listen (bei sortierten Listen muss der Anfangs-Tag mit =1, =a, =A oder für röm. Zahlen =i/I erweitert sein)
[]ein Bild einbetten und Dateien zu einem Beitrag hinzufügen
[*]Programmcode oder Daten mit fester Weite ausgeben (</>)
[]Text zitieren[quote]z.B in Antworten[/quote]

Die Tags zur Formatierung können verschachtelt werden.
Im Editor betrachtet sieht obiger Text folgendermasse aus:

Code: Alles auswählen

[list=][*]die Formatierung von Text als [b]Fett[/b], [i]Italic[/i] und [u]unterstrichener [/u]Text
[*]eine Änderung der Textfarbe und -grösse (z.B.[size=85]klein[/size], wobei die =Zahl als % zur Standardgrösse gilt)
[*]das Hinterlegen von Hyperlinks (keine mailto) auf ein Wort oder Textabschnitt
[*]unsortierte oder sortierte Listen (bei sortierten Listen muss der Anfangs-Tag mit =1, =a, =A  oder für röm. Zahlen =i/I erweitert sein)
[*]ein Bild einbetten und Dateien zu einem Beitrag hinzufügen
[*]Programmcode oder Daten mit fester Weite ausgeben (</>)
[*]Text zitieren[quote]z.B in Antworten[/quote][/list]
Die Tags zur Formatierung können [b][i][color=#BF00FF]verschachtelt [/color][/i][/b]werden.

Informationen in externen Quellen:

[]Ameisenportal: BBCode-Anleitung➚
[*]BBCode tags reference➚

Advanced BBCode Box

Um die Formatierung mit BBCode im Editor zu erweitern habe ich die Extension Advanced BBCode Box

Diese Extension ermöglicht dem Administrator die BBCode-Tags deutlich zu erweitern. Mit der Advanced BBCode Box wird auch ABBC3 installiert, eine Biblothek neuer BBCode-Tags. Die meisten Tags aus dieser Biblothek bringen kaum einen Mehrwert für unsere Plattform und deshalb stelle ich euch nicht alle zur Verfügung. Auf die Bereitstellung des Tags welcher die Verwendung verschiedener Fonts ermöglicht habe ich verzichtet, weil damit Google Fonts eingebunden würde. Auch auf die Tags zum Einbinden von Mulimedia und Rich Content verzichte ich. Ich habe die Möglichkeit benutzt einzelne Tags nur bestimmten Benutzergruppen zur Verfügung zu stellen.

Einfache Tabellen erstellen

Advanced BBCode Box ermöglicht auch Tabellen im ASCII-Format zu erstellen, wie wir dies von Markdown kennen. Siehe pipe_tables (EN) ➚

Code: Alles auswählen

[b]EINFACHE TABELLE:[/b]
| Überschrift 1 | Überschrift 2 |
|---------------|----------------|
|Zelleninhalt 1 |Zelleninhalt 2|

[b]KOMPAKTE TABELLE:[/b]
Die äusseren senkrechten Striche und die Leerzeichen um die senkrechten Striche sind optional und die Anzahl --- spielt keine Rolle.

Überschrift 1|Überschrift 2
-|-
Zelleninhalt 1|Zelleninhalt 2

[b]TEXTAUSRICHTUNG:[/b]
| links |zentriert| rechts |
|:------|:-------:|-------:|
|  Zelleninhalt  |    Zelleninhalt    |    Zelleninhalt   |
| z:B | Zelle |Inhalt |

[b]TABELLE OHNE ÜBERSCHRIFT:[/b]
||||
|:------|:-------:|-------:|
|  1 Zelleninhalt 1  |   1 Zelleninhalt 2    |  1 Zelleninhalt 2 |
|  2 Zelleninhalt 1  |   2 Zelleninhalt 2    |  2 Zelleninhalt 2 |

Ansicht des obigen Codes in der Anwendung

EINFACHE TABELLE:

Überschrift 1	Überschrift 2
Zelleninhalt 1	Zelleninhalt 2

KOMPAKTE TABELLE:
Die äusseren senkrechten Striche und die Leerzeichen um die senkrechten Striche sind optional und die Anzahl --- spielt keine Rolle.

Überschrift 1	Überschrift 2
Zelleninhalt 1	Zelleninhalt 2

TEXTAUSRICHTUNG:

links	zentriert	rechts
Zelleninhalt	Zelleninhalt	Zelleninhalt
z:B	Zelle	Inhalt

TABELLE OHNE ÜBERSCHRIFT:


1 Zelleninhalt 1	1 Zelleninhalt 2	1 Zelleninhalt 2
2 Zelleninhalt 1	2 Zelleninhalt 2	2 Zelleninhalt 2

Erweiterung mit eigenen Tags (maduTags)

Der grösste Nutzen dieser Extension besteht jedoch darin, dass Administratoren eigene BBCode-Tags definieren können (durch Hinterlegung von html/css-Code).

Formatvorlage für Artikel in der Knowledge Base

Beschreibung wird noch angepasst

Mit den maduTags lassen sich Formatvorlagen für ein Corporate Design erstellen

Absätze formatieren

Tag	Bezeichnung	Anwendung	daraus wird ein html-Code generiert >
H1	Überschrift 1 mit Sprungmarke	`[H1='SM']Text[/H1]]` `SM: Sprungmarke]` `-`	Code: Alles auswählen `<h1 id="{SIMPLETEXT}" style="text-align:left; margin-top: 16pt; margin-bottom: 16pt; font-size:24pt; font-weight: bold; color: #FF8000">{TEXT}</h1>`
H2	Überschrift 2 mit Sprungmarke	Code: Alles auswählen `[H2]Text[/H2]`	Code: Alles auswählen `<h2 id="{SIMPLETEXT}" style="text-align:left; margin-top: 16pt; margin-bottom:14pt; font-size:16pt; font-weight: bold; color: #12A3EB ">{TEXT}</h2>`
H3	Überschrift 3 mit Sprungmarke	Code: Alles auswählen `[H3]Text[/H3]`	Code: Alles auswählen `<h3 id="{SIMPLETEXT}" style="text-align:left; margin-top: 1em; margin-bottom: 12pt; font-size: 14pt; font-weight: bold; color: #404040">{TEXT}</h3>`
Block	Blocksatz m. Abstand	Code: Alles auswählen `[Block]Text[/Block]`	Code: Alles auswählen `<p style="text-align: justify; margin-bottom: 12pt; font-size:12pt; color: #000000">{TEXT}</p>`
Flat	Flattersatz m. Abstand	Code: Alles auswählen `[Flat]Text[/Flat]`	Code: Alles auswählen `<p style="margin-bottom: 8pt; font-size:12pt; color: #000000">{TEXT}</p>`
Fig	Bildtitel l/r	Code: Alles auswählen `[Fig=nn]Text[/Fig]`	Code: Alles auswählen `<p style="margin-top: {NUMBER}em;">{TEXT}</p>`

Unsortierte und sortierte Listen

Tag	Bezeichnung	Anwendung	daraus wird ein html-Code generiert >
Lq	Liste unsort. Quadrat-Bullet	Code: Alles auswählen `[Lq]Text[/Lq]`	Code: Alles auswählen `<ul style="list-style-type:square; margin-bottom: 16pt; font-size:12pt; color: #000000">{TEXT}</ul>`
Lk	Liste unsort. Kreis-Bullet	Code: Alles auswählen `[Lk]Text[/Lk]`	Code: Alles auswählen `noch ausstehend`
L1	Liste sort. 1..	Code: Alles auswählen `[L1]Text[/L1]`	Code: Alles auswählen `noch ausstehend`
Ln	Liste sort. ab n	Code: Alles auswählen `[Ln=n]Text[/Ln]`	Code: Alles auswählen `noch ausstehend`
Lr	Liste sort. römisch	Code: Alles auswählen `[Lr]Text[/Lr]`	Code: Alles auswählen `noch ausstehend`
La	Liste sort. a.. Ebene 1	Code: Alles auswählen `[La]Text[/La]`	Code: Alles auswählen `noch ausstehend`
LA	Liste sort. A.. Ebene 1	Code: Alles auswählen `[LA]Text[/LA]`	Code: Alles auswählen `noch ausstehend`

Es sind auch verschachtelte Listen, also mehrere Ebenen, möglich!

Inline Formatierung

Tag	Bezeichnung	Anwendung	daraus wird ein html-Code generiert >
fs	Schriftgrösse	Code: Alles auswählen `[Lq]Text[/Lq]`	Code: Alles auswählen `<div style="font-size:{IDENTIFIER}">{TEXT}</div>`
Q	Quelle inline	Code: Alles auswählen `[Q={URL{]Text[/Q]`	Code: Alles auswählen `<q><em>{TEXT}</em></q>`

Schriften und Sonderzeichen

Schriftart

Schriftgrösse

Sonderzeichen

Informationen in externen Quellen:

[]W3C Web Style Sheets CSS Tips & Tricks: em, px, pt, cm, in… Font Größen, zukünftige Einheiten➚
[*]unicodepedia: Unicode characters from U+0 to U+1F3➚