Kantine Texteditor

Willkommen in der Kantine, Reisender...

Melde Dich an oder registriere Dich kostenlos

  • In den meisten Fällen enthalten Beiträge normalen Text, aber gelegentlich möchte man bestimmte Wörter oder Phrasen hervorheben. Mit den unten aufgeführten BB-Codes(siehe Tabelle) kannst du beim erstellen von Inhalten, deine Texte formatieren.
    Texteditor Button Titel Beschreibung
     Quellcode Wenn du diesen Button betätigst wird der Quellcode von deinem Beitrag angezeigt.
    So lassen sich z.B. Textformatierungen zwischen verschiedenen Beiträgen 1:1 übernehmen.
    Dort kannst du dann den Text in HTML bearbeiten.
    Hinweis: Derzeit werden nicht alle HTML-Formatierungen unterstützt.
     Rückgängig Mit diesem Button kannst du deine letzte Aktion rückgängig machen
     Wiederholen Mit diesem Button kannst du rückgängig gemachte Aktionen wiederherstellen
     Vollbild Zeigt den Texteditor im Vollbildmodus an
     Überschrift Mit diesem Button kannst du Textstellen als eindeutige Überschrift definieren.
    Ãœberschriften nehmen immer die komplette Textzeile ein.
    Überschriften haben zudem einen höheren Abstand zur nächsten Textzeile.
    Ãœberschriften werden automatisch Teil des Inhaltsverzeichnisses.
     Fett gedruckt Nach einem Klick auf diesen Button wird markierter Text fett angezeigt.
     Kursiv Nach einem Klick auf diesen Button wird markierter Text kursiv angezeigt.
     Unterstrichen Nach einem Klick auf diesen Button wird markierter Text unterstrichen angezeigt.
     Durchgestrichen Nach einem Klick auf diesen Button wird markierter Text durchgestrichen angezeigt.
     Tiefgestellt Nach einem Klick auf diesen Button wird markierter Text tiefgestellt angezeigt.
    ï„« Hochgestellt Nach einem Klick auf diesen Button wird markierter Text hochgestellt angezeigt.
     Schriftart In diesem Dropdown-Menü kannst eine andere Schriftart für deinen Text wählen.
     Schriftgröße Hiermit kannst du die Zeichengröße von Textpassagen verändern.
    Beachte bitte auch die Auswahl: "Schriftgröße entfernen" mit der sich alle Änderungen wieder auf Standard zurücksetzen lassen.
     Schriftfarbe Wähle diese Option wenn du die Farbe von deinem Text verändern möchtest.
    Beachte bitte auch die Auswahl: "Schriftfarbe entfernen" mit der sich alle Änderungen wieder auf Standard zurücksetzen lassen.
     Liste Listen sind eine sehr praktische Funktion um die Übersicht zu behalten.
    Über den BB-Code kannst du Listen mit Aufzählung oder ohne Aufzählung erstellen.

    Neue Zeilen OHNE Listenpunkt kannst du mit SHIFT+ENTER erzeugen.
     Ausrichtung Hier kannst du wählen wie dein Text ausgerichtet werden soll.
    Zur Auswahl steht:
    Linksbündig, Zentriert, Rechtsbündig und Blocksatz.
     Link Mit diesem Menü kannst du Links in Texte einfügen oder bereits vorhandene Links editieren/entfernen.
    Bei jedem Link muss auch ein Text angegeben werden, der statt der ursprünglichen URL angezeigt wird.

    Beachte bitte, dass das Forum interne Links zu Themen, Beiträgen und anderen Inhalten automatisch umwandeln kann.
    Im Forum können z.B. Links direkt per Copy & Paste eingefügt werden, der Titel des Themas wird dann automatisch angezeigt.
     Bild Nach einem Klick auf diesen Button öffnet sich das Menü zum Hinzufügen von externen Bildern
    Hier muss der Link zur Quelle und eine Adresse, die beim Klick auf das Bild geöffnet werden soll, angegeben werden.
    Zudem kann der Textumfluss (Keine Auswahl, Links oder Rechts) angegeben werden
     Tabelle Das einfachste Beispiel für Tabellen seht ihr gerade direkt vor euch.
    Diese Ãœbersicht wurde als eine Tabelle erstellt.
    Beim erstellen der Tabelle könnt ihr die Anzahl der Spalten & Zeilen frei wählen.

    Beachtet bitte auch, dass ihr bereits eingefügte Tabellen bearbeiten könnt, indem ihr den Cursor an eine Position in der Tabelle setzt und erneut auf das Icon klickt.
     Media Über diesen Button kannst du auf unsere Medienverwaltung zugreifen.
    Hinweis: Für Details sieh dir die Hilfe zur Medienverwaltung an.
    Hinweis
    : Nur für ausgewählte Nutzer freigeschalten.
     Zitat Mit einem Zitat kannst du direkt auf den Beitrag von einem anderen User antworten.
    Wurde man in einem Beitrag zitiert wird im Kontrollzentrum eine Benachrichtigung angezeigt.
     Code Code-Boxen werden genutzt um längere Code-Passagen anzuzeigen.
    Es werden die Zeilen gezählt und keine Textformatierung in der Code-Box angewendet.
    Code-Boxen bietet den Vorteil, dass der gesamte Inhalt direkt in die Zwischenablage kopiert werden kann. Die Code-Box bietet die Funktion verschiedene Syntax zu "Highlighten" (HTML, CSS, PHP, Python, XML, ect.) und einen Namen für dein Dokument festzulegen.
    Klickt dazu einfach auf den Titel der Code-Box.
    Hinweis: Mit einem Klick auf diesen Button wird zunächst der gesamte Text in die Code-Box geschrieben. Um nur Teile deines Textes zu erfassen musst du den Quelltext editieren. Nähere Infos dazu erhältst du in den Tipps & Tricks.
    ï„  Inline_code Nach einem Klick auf diesen Button wird der markierte Text als Inline-Code dargestellt
    Der BB-Code hierzu sieht wie folg aus: [tt]Inline-Code[/tt]
     Spoiler Mit einem Klick auf diesen Button wir der gesamte Text als Spoiler markiert. Dieser wird dem Leser erst nach dessen Zustimmung angezeigt.
    Hier ein Beispiel:
    Eigener Spoilertitel
    Ich bin ein Spoiler
    Du kannst deinem Spoiler eine eigene Beschriftung geben. Diese steht dann auf dem Button zur Anzeige des Spoilers.
    Klick dazu im Texteditor einfach auf den Titel des Spoilers.
    Hinweis:
    Mit einem Klick auf diesen Button wird zunächst der gesamte Text als Spoiler markiert. Um nur Teile deines Textes zu erfassen musst du den Quelltext editieren. Nähere Infos dazu erhältst du in den Tipps & Tricks.
     RP-Profil verlinken (Profil ID) Mit einem Klick auf diesen Button wird der BB-Code zur Verlinkung eines Profils aus dem Rollenspielregister eingefügt.
    Die dafür nötige ID erhältst über Adresse des Profils.
    in diesem Beispiel ist es die 21: https://www.starcitizen-kantine.de/show/entry/21-doerek/
    Der BB-Code hierzu sieht wie folg aus: [entry]21[/entry]
    Ergebnis:
     Kalender Termine (Event ID) Mit einem Klick auf diesen Button wird der BB-Code zur Verlinkung eines Termins aus dem Kalender eingefügt.
    Die dafür nötige ID erhältst über Adresse des Events.
    in diesem Beispiel ist es die 4620: https://www.starcitizen-kantine.de/calendar/event/4620-open-roleplay-verse/
    Der BB-Code hierzu sieht wie folg aus: [event]4620[/event]
    Ergebnis:
    DCDoerek
    18. Mai 2022 um 18:04
     Organisation verlinken (Orga ID) Mit einem Klick auf diesen Button wird der BB-Code zur Verlinkung einer Gruppe aus unserer Gruppen- und Projektübersicht eingefügt.
    Die dafür nötige ID erhältst über Adresse der Gruppe.
    in diesem Beispiel ist es die 25: https://www.starcitizen-kantine.de/org/overview/25-engineering-team/
    Der BB-Code hierzu sieht wie folg aus: [clan]25[/clan]
    Ergebnis:
    4. Februar 2022 um 00:00
     Thema-ID Permalink Mit einem Klick auf diesen Button wird der BB-Code zur Verlinkung eines Beitrags aus aus unserem Forum eingefügt.
    Die dafür nötige ID erhältst über Adresse des Beitrags.
    in diesem Beispiel ist es die 390: https://www.starcitizen-kantine.de/forum/thread/390-turbulent-gründet-entwicklerstudio-in-montreal-zur-unterstützung-von-starcitizen/
    Der BB-Code hierzu sieht wie folg aus: [thread]390[/thread]
    Ergebnis:
    starcitizen-kantine.de/forum/thread/390/
     Box-Left Hinweis: Diese Funktion ist derzeit deaktiviert.
     Linie einfügen Mit einem Klick auf diesen Button wird der BB-Code für einen horizontalen Trennstrich eingefügt.
    Der BB-Code hierzu sieht wie folg aus: [hr][/hr]
    Ergebnis:

     Link-DB Eintrag einfügen (Eintrag ID) Mit einem Klick auf diesen Button wird der BB-Code zur Verlinkung eines Beitrags aus aus unserer Link-Datenbank eingefügt.
    Die dafür nötige ID erhältst über Adresse des Beitrags.
    in diesem Beispiel ist es die 60: https://www.starcitizen-kantine.de/link-entry/60-verse-night/
    Der BB-Code hierzu sieht wie folg aus: [linkdb]60[/linkdb]
    Ergebnis:
    18. Juli 2021 um 13:12
    OOC - Out of Character Nach einem Klick auf diesen Button wird der markierte Text als Out-of-Character gekennzeichnet.
    Hierbei wird jeweils nach der Markierung ein Zeilenumbruch eingefügt.
    Der BB-Code hierzu sieht wie folg aus: [ooc]OOC-Text[/ooc]
    Ergebnis:
    OOC-Text
    /br>
    Hinweis: Für Details sieh dir die Hilfe zur OOC und IC-Kommunikation an.
    IC - In Charakter Nach einem Klick auf diesen Button wird der markierte Text als In-Character gekennzeichnet.
    Hierbei wird jeweils nach der Markierung ein Zeilenumbruch eingefügt.
    Der BB-Code hierzu sieht wie folg aus: [ic]IC-Text[/ic]
    Ergebnis:
    IC-Text
    /br>
    Hinweis: Für Details sieh dir die Hilfe zur OOC und IC-Kommunikation an.
     Tab-Menü Hinweis: Diese Funktion ist derzeit deaktiviert.
     QR-Code Nach einem Klick auf diesen Button wird der markierte Text zur Darstellung als QR-Code gekennzeichnet.
    Der BB-Code hierzu sieht wie folg aus: [qrcode]https://www.starcitizen-kantine.de[/qrcode]
    Ergebnis:

    Tipp: Ein QR-Code muss nicht immer eine Adresse sein
     Unix-Zeitstempel Mit diesem BBCode lässt sich ein Unix-Zeitstempel anzeigen. Der Zeit-Stempel wird für den Betrachter in seiner Zeitzone Angezeigt.
    Im folgenden Beispiel wurde der Unix-Zeitstempel 1663334124 gewählt. Der BBcode kann unterschiedlich lang formatiert werden.

    Normale Datum & Zeit Angabe:
    â—½ [unixtime='1663334124','j. F Y'][/unixtime] 16. September 2022, 15:15:24
    â—½ [unixtime='1663334124','j. F Y','H:i:s A'][/unixtime] 16. September 2022, 15:15:24 PM
    â—½ [unixtime='1663334124','default','H:i:s A'][/unixtime] Freitag, 16. September 2022, 15:15:24 PM
    â—½ [unixtime='1663334124','j. F Y','default'][/unixtime] 16. September 2022, 15:15:24

    Relative Datum & Zeit Angabe:
    â—½ [unixrelative]1663334124[/unixrelative] vor 3 Monaten
    â—½ [unixrelative='1663334124','full'][/unixrelative] vor 3 Monaten, 2 Wochen, 6 Tagen, 5 Stunden und 52 Minuten
     Persönliche Notizen Mit einem Klick auf diesen Butten kannst du eine, von dir vorbereitete, Vorlage einfügen.
    Hinweis: Für Details sieh dir die Hilfe zu den persönlichen Notizen an.
     Box Mit einem Klick auf diesen Button wird der BB-Code zur Verlinkung eines Bausteins aus der Kantinen-Webseite eingefügt.
    In den Optionen muss angegeben werden, welcher Baustein eingefügt werden soll.
    Zudem lässt sich der Textumfluss sowie die Breite festlegen.
    Der BB-Code hierzu sieht dann wie folg aus: [box='241',none]Willkommen-Box | Data-Hub[/box]
    Ergebnis:
    [box='241','none']Statistiken[/box]
    Hinweis: Nur für ausgewählte Nutzer freigeschalten.
     Aufgabe Mit einem Klick auf diesen Button wird der BB-Code zur Verlinkung einer Aufgabe aus unserer Aufgabenverwaltung eingefügt.
    Die Aufgabe wird über eine Suche hinzugefügt.
    Die ID kannst du aber auch der Adresse der Aufgabe entnehmen.
    in diesem Beispiel ist es die 111: https://www.starcitizen-kantine.de/workplace/task/111-logbuch-komponente-vorstellen-erklären/
    Der BB-Code hierzu sieht wie folg aus: [task='111'][/task]
    Ergebnis:
    [task='111'][/task]
    Hinweis: Nur für ausgewählte Nutzer freigeschalten.
     Font Awesome Icons Über diesen Button kannst du Font Awesome Icons einfügen
    Hinweis: Nur für ausgewählte Nutzer freigeschalten
     Galerie Mit einem Klick auf diesen Button wird der BB-Code zum Einfügen von Bildern aus deiner Galerie eingefügt.
    Du hast folgende Größen für dein Bild zur Auswahl:
    - Sehr Klein (144 × 144) (engl.'tiny')
    - Klein (280× 210) (engl. 'small')
    - Mittelgroß (560 × 420) (engl. 'medium')
    - Groß (1200 × 675) (engl. 'large')
    - Original (1920 × 1080) (engl. 'original')
    Die dafür nötige ID erhältst über Adresse des Bildes.
    in diesem Beispiel ist es die 251: https://www.starcitizen-kantine.de/gallery/image/251-wip/
    Der BB-Code hierzu sieht wie folg aus: [image=251,'tiny'][/image]
    Ergebnis:
    starcitizen-kantine.de/gallery/image/251/
    Hinweis: Nur für ausgewählte Nutzer freigeschalten.
    ï‚— Referenz / Quelle Hinweis: Diese Funktion ist derzeit deaktiviert.
     Seitenumbruch Hinweis: Diese Funktion ist derzeit deaktiviert.

Die Basics

Bevor wir tiefer in die Möglichkeiten der Textformatierung einsteigen möchten wir dir einige Basics zur Hyper Text Markup Language (kurz HTML) und zu den Cascading Style Sheets (kurz CSS) geben.
Warum? Das sind die Standards auf denen die Darstellung von Webseite in der einen oder anderen Weise basiert.

HTML

HTML besteht aus sogenannten Tags. Über diese Tags wird festgelegt um was es sich innerhalb dieses Tags handelt. Dabei gibt es immer einen Anfangs- und einen Endtag.


HTML: Unterstreichen
<u>Dieser Text wird unterstrichen</u>
Dieser Text wird unterstrichen

Du hast sicher auch die Ähnlichkeit zu unseren BB-Codes bemerkt, wie [event][/event] oder [ooc][/ooc]. Hier ist das Prinzip das selbe.

Um einen Text zu Unterstreichen verwenden wir als Anfangstag <u> und als Endtag </u> . Der Anfangs- und Endtag unterscheiden sich durch das / . Das ist meistens so.

Ich schreibe meistens, weil es ein besonderes Tag gibt, das alleine verwendet wird und zwar z.B.<br>.

Dieses Tag gibt an, dass an dieser Stelle ein Zeilenumbruch vorgenommen werden soll, hat deshalb keinen Inhalt und benötigt daher kein Endtag (</br> wird auch manchmal verwendet, dann aber ohne Anfangstag. Das Prinzip ist das gleiche).

Tags können auch verschachtelt werden. Dabei ist wichtig das immer der innere vor dem äußeren Tag geschlossen wird.

Also so <u><em></em></u> und nicht so <u><em></u></em>.

Für die Textbearbeitung im Texteditor auf unserer Webseite ist wichtig zu verstehen, auf in welcher Ansicht man den Text gerade bearbeitet, da in der Standard-Ansicht der angezeigte Text noch in HTML-Code umgewandelt werden muss. Somit kann die Standard-Ansicht nichts mit der Eingabe von <br> anfangen kann.

Ebenso wenig Funktioniert die Eingabe einer neuen Zeile durch einen Druck auf die Enter-Taste in der Code-Ansicht, da ja im HTML-Code ein Zeilenumbruch durch <br> definiert wird.

Einige Tags können auch weitere Informationen enthalten, wie einen zusätzlichen Namen, Wert oder einer Adresse. Diese Information wir dann im Anfangstag mit angegeben.

HTML: Link
<a href="https://www.starcitizen-kantine.de">Zur Kantine</a>
Zur Kantine

In diesem Beispiel ist die Adresse des Links im Anfangstag als "href"-Attribut enthalten. Tags können auch mehrere Attribute enthalten.

HTML: Link mit Bild
<a href="https://www.starcitizen-kantine.de">
<img border="0" alt="Kantinen-Logo" src="https://www.starcitizen-kantine.de/images/style-9/pageLogo-4602c4f3.png" height="100px">
</a>
Kantinen-Logo

In diesem Beispiel haben wir die Tags <a> und <img> verschachtelt (Ist es aufgefallen? Das <img>-Tag hat auch kein Endtag) und an das <img>-Tag mehrere Attribute vergeben.

Dabei legt "border" die Stärke der Umrandung des Bildes fest, "alt" den beschreibenden Text, "src" den Pfad zur Bildquelle und "height" die Höhe des Bildes in Pixel. Da wir den Bild-Tag innerhalb des Link-Tags geschrieben haben, funktioniert das Bild jetzt wie ein Link.

Da wir nun schon einige Tags kennen gelernt haben, hier eine Übersicht, über die wichtigsten:

Quellcode Ergebnis Beschreibung
HTML: Link mit Bild
<a href="https://www.starcitizen-kantine.de">Zur Kantine</a>
Zur Kantine So sieht ein Link aus.
HTML: Zeilenumbruch
<br>
Zeilenumbruch
HTML: Durchgestrichen
<del>Durchgestrichen</del>
Durchgestrichen Der Text wird durchgestrichen
HTML: Kusiv
<em>Kusiv</em>
Kusiv Der Text wird kusiv
HTML: Bild
<img border="0" alt="Kantinen-Logo" src="https://www.starcitizen-kantine.de/images/style-9/pageLogo-4602c4f3.png" height="100px">
Kantinen-Logo So wird ein Bild eingebunden
HTML: Überschrift
<h2>Überschrift 1</h2>
<h3>Überschrift 2</h3>
<h4>Überschrift 3</h4>
<h5>Überschrift 4</h5>

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4
Bei Überschriften gibt es verschiedene Ebenen (<h1> bis <h6>). <br><u>Hinweis:</u> Da für die Webseite an sich <h1> vorbehalten ist, beginnen im Texteditor die Überschriften bei 1, im Quellcode werden sie aber als <h2> geführt.
HTML: Nummerierte Liste
<ol>
    <li>Listenelement</li>
    <li>Listenelement</li>
</ol>
  1. Listenelement
  2. Listenelement
In einer nummerierten Liste muss die Nummer nicht angegeben werden. Sie wird automatisch mit jeder neuen Zeile generiert.
HTML: Paragraf
<p>Paragraf</p>

Paragraf

In einen Paragrafen wird in der Regel ein zusammenhängender Fließtext geschrieben.
HTML: Langer Code
<pre data-file="Titel" data-highlighter="html" data-line="1">Langer Code</pre>
HTML: Titel
Langer Code
Über das <pre>-Tag wird die sog. Codebox festgelegt. In unserem Beispiel hat diese noch folgende Attribute erhalten:
Attribut Wert
data-file Titel
data-highlighter html
data-line 1
HTML: Abschnitt
<span style="color:blue">Abschnitt</span>
Abschnitt Abschnitte werden häufig eingesetzt um bestimmte Designs festzulegen. Dazu dient das Attribut "style". In unserem Beispiel wird festgelegt, dass der Text Blau sein soll.
HTML: Fett
<strong>Fett</strong>
Fett Der Text wird fett
HTML: Tiefgestellt
<sub>Tiefgestellt</sub>
Tiefgestellt Der Text wird tiefgestellt
HTML: Hochgestellt
<sup>Hochgestellt</sup>
Hochgestellt Der Text wird hochgestellt
Spaltenüberschrift 1 Spaltenüberschrift 2
Letzte Zeile 1 Letzte Zeile 2
Zeile 1 Spalte 1 Zeile 1 Spalte 2
Zeile 2 Spalte 1 Zeile 2 Spalte 2
Zeile 3 Spalte 1 Zeile 3 Spalte 2
Bei einer Tabelle fällt sofort auf, dass dort mehrere Elemente ineinander verschachtelt sind.
Tagname Beschreibung
<table> Legt eine Tabelle fest
<thead> Legt die Kopfzeile fest (optional)
<tr> Legt eine Zeile fest (kommt immer vor der Zelle)
<th> Legt eine Zelle in der Kopfzeile fest
<tbody> Legt den Tabellenkörper fest
<td> Legt eine Zelle fest
<tfoot> Legt die Fußzeile fest (optional)

Bei verschachtelten Elementen wie einer Tabelle ist besonders wichtig den Überblick über die Anfangs- und Endtags zu behalten.
(Merke: So <tr><td></td></tr> und nicht so <td><tr></tr></td> oder so <tr><td></tr></td>)
HTML: Unterstrichen
<u>Unterstrichen</u>

Unterstrichen

Der Text wird unterstrichen
HTML: Ungeordnete Liste
<ul><li>Listenelement</li><li>Listenelement</li></ul>
  • Listenelement
  • Listenelement
In einer ungeordneten Liste wird automatisch ein Listenzeichen generiert.


Besondere Tags

Mit dem nun gewonnenen Wissen können wir uns jetzt ein Beispiel aus dem Lexikoneintrag zur Textformatierung anschauen:

Quellcode Text
HTML: Beschreibung - Spoiler
<fa-icon>exclamation-triangle</fa-icon> Achtung gleich kommt ein Spoiler:<br>
<woltlab-spoiler data-label="Eigener Spoilertitel">
Ich bin ein Spoiler
</woltlab-spoiler>
Du kannst deinem Spoiler eine eigene Beschriftung geben. Diese steht dann auf dem Button zur Anzeige des Spoilers.<br>
Klick dazu im Texteditor einfach auf den Titel des Spoilers.<br>
Achtung gleich kommt ein Spoiler:
Eigener Spoilertitel
Ich bin ein Spoiler
Du kannst deinem Spoiler eine eigene Beschriftung geben. Diese steht dann auf dem Button zur Anzeige des Spoilers.
Klick dazu im Texteditor einfach auf den Titel des Spoilers.

In diesem Beispiel findest du neben mehreren <br>-Tags auch die Tags <woltlab-spoiler> und <fa-icon>.

Diese haben wir noch nicht kennengelernt. Das liegt daran, dass es sich dabei um keine Standard-Tags handelt, sondern um extra für unsere Seite erstellten Tags.

<woltlab-spoiler>-Tag besitzt das Attribut "data-label". Dort ist der Beschriftung für den Spoiler hinterlegt.

Über das <fa-icon>-Tag kann ein in Icon aus der Font Awesome Datenbank eingefügt werden also z.B. <fa-icon>exclamation-triangle</fa-icon> für ein

Wenn du mehr über das Thema HTML erfahren möchtest besuche die Seiten von w3schools.com oder selfHTML.org

CSS

Über CSS wird der Stil der Webseite festgelegt und arbeitet eng mit den Tags im HTML-Code zusammen.

In diesem Beispiel wird der Stil für die Tags <h2>, <p> und <table> festgelegt. Der Aufbau ist dabei immer gleich:
Element {Stilelement1 :Wert1 ; Stilelement2 :Wert2 ;}
Als erstes kommt der Name und dann werden die Stilelemente in die { }-Klammer geschrieben. Der zu einem Stilelement gehörende Wert folgt immer nach dem :.
Die Stilelemente werden durch ; von einander getrennt.
Mit der Festlegung des Stils an Hand des Tagnamens wird festgelegt, dass alle Tags mit diesem Namen den selben Stil haben.
Mit dem CSS aus diesem Beispiel werden dann alle <h2>-Überschriften mit der Textfarbe weiß und zentrierter Textausrichtung dargestellt.
Alle Tabellen haben einen hellblauen Hintergrund und für Paragrafen wird die Schriftart "Verdana" in der Größe 20 Pixel verwendet.

Im Beispiel fällt auf, dass vor dem Element text-center ein . steht. Hierbei handelt es sich nicht um eine HTML-Tag, sondern um eine sog. Stil-Klasse.
In diesen Klassen lassen sich die Stilelemente wie gehabt festlegen.
Diese Klassen werden dann über den Attributwert "class" den einzelnen HTML-Tags zugewiesen, also z.B. <h2 class="text-center">Zentrierte Überschrift<h2>

Möchte man für einzelne Elemente den Stil festlegen, so kann man diesen direkt als style-Attribut in das Anfangstag schreiben.

HTML: Individuelle Überschrift
<h2 style="color:blue;text-align:center;">Überschrift 1</h2>
<span style="color:red">Bereich im Fließtext</span>
Hier wird der Stiel nur für diesen einen Überschrift festgelegt. Alle anderen Überschriften sind davon nicht betroffen.
Um einen Bereich in einem Fließtext festzulegen eignet sich das <span>-Tag.

Nachdem wir bereits einige der Stilelemente wie color, background-color oder text-align kennengelernt haben hier eine Übersicht über die für den Texteditor relevanten:

Stilelement Beschreibung
HTML: color
<span style="color:#800000">Schriftfarbe</span>
Schriftfarbe Das Stilelement color legt die Farbe des Textes fest. Die Farbe lässt sich dabei auf verschiedene Arten definieren. So kann der Name, der sog. HEX-Wert oder der RGB wer angegeben werden.
Folgende 3 Beispiele legen alle die gleiche Farbe fest:
  • <span style="color:ForestGreen">Farbe</span>
  • <span style="color:#228B22">Farbe</span>
  • <span style="color:rgb(34, 139, 34)">Farbe</span>

Für mehr Details zu Farben kannst du auch die Seite w3schools.com besuchen.

HTML: font-family
<span style="font-family: Times New Roman, Times, serif">Schriftart</span>
Schriftart Das Stilelement font-family legt die Schriftart des Textes fest. Wichtig ist dabei immer den kompletten Namen anzugeben.
HTML: font-size
<span style="font-size: 18pt">Schriftgröße</span>
Schriftgröße Das Stilelement font-size legt die Schriftgröße des Textes fest. Die Größe kann auf mehrere Arten angegeben werden u. A. als
  • Pixel (px)
  • Points (pt)
  • Relativ (em)
HTML: text-center
<td class="text-center">Textausrichtung</td>
Textausrichtung Hier fällt auf, dass der Stil nicht über den <span>-Tag festgelegt wurde, sondern über den <td>-Tag der Tabelle. Das hängt damit zusammen, dass für eine Zentrierung des Textes ja die breite des umliegenden Elements ausschlaggebend ist.
Auch wurde hier der Stil nicht direkt angegeben, sondern über die Angabe der Stil-Klasse festgelegt

Wenn du mehr über das Thema CSS erfahren möchtest besuche die Seiten von w3schools.com oder selfHTML.org

Spezielle Formatierungen

Tabs

Ähnlich einer Tabelle in der Code-Ansicht können auch Tabs in der Standardansicht erstellt werden. Der Tab Hat dabei einen Titel und ihm kann ein Font Awesome Icon zugewiesen werden.

Innerhalb eines Tabs wird derzeit nur Textinhalt ODER Subtabs unterstützt. Beides gleichzeitig ist also nicht möglich.
Die Syntax hierzu sieht wie folgt aus:

Quellcode Ergebnis
[tabmenu]

Der Texteditor unterstützt folgende Shortcuts:

  • Strg+Shift+M: Entfernen der Formatierung des selektierten Textes.
  • Strg+B: Fettdruck
  • Strg+I: Kursiv
  • Strg+U: Unterstrichen
  • Strg+H: Hochgestellt
  • Strg+L: Tiefergestellt
  • Strg+K: Verlinken
  • Strg+Shift+7: Nummerierte Liste
  • Strg+Shift+8: Unsortierte Liste

Kommentare 1

wir sollten die Option im Benutzerkontrollzentrum mit aufnehmen die jeder User in seinen Einstellungen vorgeben kann:

  • [JA / NEIN] Text-Formatierung beim Einfügen in den Editor übernehmen
    Die Deaktivierung dieser Option erzwingt das Einfügen aus der Zwischenablage in reiner Textform, Formatierungen werden dabei entfernt.