Referenz Formatieren mit BBCode

 ! Nachricht von: madu

in Arbeit

Referenzhandbuch: Formatieren mit dem modifizierten BBCode

INHALT

:

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:

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. 🡽

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 1Zelleninhalt 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 1Zelleninhalt 2

TEXTAUSRICHTUNG:

linkszentriertrechts
ZelleninhaltZelleninhaltZelleninhalt
z:BZelleInhalt

TABELLE OHNE ÜBERSCHRIFT:

1 Zelleninhalt 11 Zelleninhalt 21 Zelleninhalt 2
2 Zelleninhalt 12 Zelleninhalt 22 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: