Bobaro Editor – Benutzeranleitung #

Eine vollständige Übersicht aller Funktionen des Bobaro Editors und der Toolbar.

Inhaltsverzeichnis #

  1. Aufbau des Editors
  2. Metadaten: Titel, Datum, Tags
  3. Tabs: Schreiben, Vorschau, Kommentare
  4. Statusleiste
  5. Toolbar – Schnellbuttons (oben)
  6. Toolbar – Text & Struktur
  7. Toolbar – Gestaltung
  8. Toolbar – Medien
  9. Toolbar – Module
  10. Toolbar – Werkzeuge
  11. Toolbar – Verwalten
  12. Tastaturkürzel
  13. Textkürzel (Autovervollständigung)
  14. Syntax-Referenz
  15. Kommentare verwalten
  16. Speichern und Veröffentlichen

1. Aufbau des Editors {#aufbau} #

Der Editor besteht von oben nach unten aus:

2. Metadaten: Titel, Datum, Tags {#metadaten} #

Das Metadaten-Panel lässt sich über den Button „Meta" oben rechts ein- und ausblenden.

FeldBeschreibung
TitelDer Artikeltitel (Pflichtfeld)
AutorName des Autors
DatumDatum des Artikels (Datepicker)
UhrzeitUhrzeit des Artikels (Timepicker)
TagsTags als Pillen eingeben — Komma oder Enter trennt Tags
Tags eingeben: Einfach tippen, dann Komma oder Enter drücken. Per Klick auf das × an einem Tag lässt es sich wieder entfernen.

3. Tabs: Schreiben, Vorschau, Kommentare {#tabs} #

Über die Tab-Leiste wechselst du zwischen drei Ansichten:

TabFunktion
SchreibenDie normale Editoransicht zum Verfassen
VorschauLive-Vorschau des gerenderten Artikels (Strg + E)
KommentareKommentar-Verwaltung für diesen Artikel
In der Tab-Leiste rechts befinden sich außerdem:

4. Statusleiste {#statusleiste} #

Die Statusleiste am unteren Rand der Schreibfläche zeigt:

5. Toolbar – Schnellbuttons (obere Leiste) {#schnellbuttons} #

Die obere Toolbar-Reihe enthält die häufigsten Funktionen als direkte Icons.

ButtonFunktionTastenkürzel
H1Überschrift 1Strg + Alt + 1
H2Überschrift 2Strg + Alt + 2
H3Überschrift 3Strg + Alt + 3
B (Fett)FettschriftStrg + B
I (Kursiv)KursivschriftStrg + I
Inline-Code–
{ }Codeblock–
🔗Link einfügenStrg + K
🖼Bild einfügenStrg + P
📁Medienverzeichnis öffnenUmschalt + Strg + P
⊞Tabelle einfügen (Grid-Picker)–
"ZitatStrg + Alt + Q
—TrennlinieStrg + Alt + H

6. Toolbar – Text & Struktur {#text-struktur} #

Dropdown-Kategorie für Listen, Strukturelemente und Sonderzeichen.

Listen #

EintragSyntax
Bullet-Liste- Listenpunkt
Nummerierte Liste1. Listenpunkt
Checkbox (leer)- [ ] Aufgabe
Checkbox (angehakt)- [x] Aufgabe
Beschreibungsliste (DL);;Begriff / : Beschreibung
Akkordeon-Liste;;>Begriff / : Beschreibung

Struktur #

EintragFunktion
InhaltsverzeichnisFügt {toc} ein – erzeugt automatisch ein Inhaltsverzeichnis aus den Überschriften
TabelleGrid-Picker (bis 10×8) zum visuellen Auswählen der Größe
Horizontale Linie---
Typografie-ZeichenUntermenü mit Gedankenstrichen (— –), Auslassungspunkten (…), Anführungszeichen, geschütztem Leerzeichen

7. Toolbar – Gestaltung {#gestaltung} #

Dropdown-Kategorie für visuelle Hervorhebungen und interaktive Elemente.

Hinweisboxen #

Syntax: :::alert-FARBE … :::

FarbeBedeutung
greenErfolgreich
yellowWarnung
redAlarm
greyInfo (Grau)
infoInfo (Cyan)
userBenutzerfarbe
Beispiel:
1 2 3
:::alert-green
Das hat geklappt!
:::

Textmarker (Highlighter) #

Syntax: ==Text== (Gelb), oder mit Farb-Präfix:

SyntaxFarbe
==Text==Gelb
==g:Text==Grün
==r:Text==Rot
==b:Text==Blau
==h:Text==Hellgrau
==s:Text==Dunkel

Schaltflächen (Buttons) #

Syntax: BTN-FARBE:Beschriftung

SyntaxFarbe
BTN:TextBlau
BTN-SUCCESS:TextGrün
BTN-DANGER:TextRot
BTN-WARNING:TextGelb
BTN-SECONDARY:TextGrau
BTN-DARK:TextDunkel
BTN-LIGHT:TextHell
BTN-USER:TextBenutzerfarbe

Aufklappbereiche (Collaps) #

Syntax: [COLLAPS-FARBE:Überschrift]

… <<<

Verfügbare Farben: BLUE, GREEN, RED, YELLOW, GREY, DARK, LIGHT, USER

Beispiel:

1 2
[COLLAPS-BLUE:Mehr lesen]>>>
Hier steht der versteckte Inhalt.</p></div></details>

Tabs #

Syntax für eine Tab-Gruppe:

1 2 3 4 5 6 7
[TABS]
[TAB-BLUE:Tab 1]
Inhalt von Tab 1
[TAB-GREEN:Tab 2]
Inhalt von Tab 2
[/TABS]

Verfügbare Tab-Farben: BLUE, GREEN, RED, YELLOW, GREY, DARK, LIGHT, USER

Sonstiges (Gestaltung) #

EintragSyntax
TastenkombinationStrg+C
Code inline code
Codeblock ``code`

8. Toolbar – Medien {#medien} #

Dropdown-Kategorie für alle Medientypen.

EintragSyntax / Funktion
Bild
Alternativtext
Alternativtext
Video (lokal)@
YouTube
Vimeo[vimeo:VIDEO-ID]
MP3-Audioplayer[mp3:pfad/zur/datei.mp3]
PDF-Viewer[pdf:pfad/zur/datei.pdf]
Karussell einfügenÖffnet Auswahl-Dialog
Galerie einfügenÖffnet Auswahl-Dialog
Diashow einfügenÖffnet Auswahl-Dialog
Downloads einfügenÖffnet Auswahl-Dialog
MedienverzeichnisÖffnet den Datei-Manager im Modal

9. Toolbar – Module {#module} #

Dropdown-Kategorie für spezielle Bobaro-Inhaltsmodule.

ModulFunktion
BewertungÖffnet den Bewertungs-Generator (Sterne, Punkte)
BrowserbarÖffnet den Browserbar-Generator (zeigt URL-Leiste im Artikel)
InfoboxÖffnet den Infobox-Generator
Ratingbar einfügenWählt eine gespeicherte Ratingbar aus und fügt {ratingbar:ID} ein
App-Review einfügenWählt ein App-Review aus und fügt {appreview:ID} ein
Autorenbox einfügenWählt einen Autor aus und fügt {autor:ID} ein
Timeline einfügenWählt eine Timeline aus und fügt {timeline:ID} ein
HTML-Block einfügenFügt einen gespeicherten HTML-Block ein: {html:ID}
Laufband einfügenWählt ein Laufband aus und fügt {laufband:ID} ein

Soziale Netzwerke #

Fügt eine Social-Media-Leiste ein. Verfügbare Varianten:

StilAusrichtungSyntax
ButtonLinks{socialnetworkbar:l1}
ButtonMitte{socialnetworkbar:m1}
ButtonRechts{socialnetworkbar:r1}
RundLinks{socialnetworkbar:l2}
RundMitte{socialnetworkbar:m2}
RundRechts{socialnetworkbar:r2}
IconLinks{socialnetworkbar:l0}
IconMitte{socialnetworkbar:m0}
IconRechts{socialnetworkbar:r0}

10. Toolbar – Werkzeuge {#werkzeuge} #

Hilfsmittel beim Schreiben.

EintragFunktion
Bootstrap Icon einfügenÖffnet den Icon-Picker – suche und füge ein Bootstrap Icon ein
Lorem IpsumÖffnet den Lorem-Ipsum-Generator
TextbausteineÖffnet die Textbausteine-Verwaltung
Text vorlesenStartet die Text-to-Speech-Funktion (TTS) für den Editorinhalt

11. Toolbar – Verwalten {#verwalten} #

Öffnet die Manager für alle Module direkt aus dem Editor heraus.

EintragFunktion
Ratingbars verwaltenRatingbar-Manager
Autoren verwaltenAutoren-Manager
Karussells verwaltenKarussell-Manager
Galerien verwaltenGalerie-Manager
Diashows verwaltenDiashow-Manager
HTML-Blöcke verwaltenHTML-Block-Manager
Laufbänder verwaltenLaufband-Manager
App-Reviews verwaltenApp-Review-Manager
Timelines verwaltenTimeline-Manager
Downloads verwaltenDownload-Manager
Social-Media-Symbole verwaltenSocial-Media-Manager
Textkürzel verwaltenÖffnet den Textkürzel-Manager

12. Tastaturkürzel {#tastaturkuerzel} #

Strg + Taste #

KürzelFunktion
Strg + BFett
Strg + IKursiv
Strg + KLink einfügen
Strg + PBild (Markdown) einfügen
Strg + Umschalt + PMedienverzeichnis öffnen
Strg + EVorschau ein/aus

Strg + Alt + Taste #

KürzelFunktion
Strg + Alt + 1Überschrift 1
Strg + Alt + 2Überschrift 2
Strg + Alt + 3Überschrift 3
Strg + Alt + QZitat
Strg + Alt + KTastenkombination ()
Strg + Alt + HTrennlinie
Strg + Alt + TTabelle einfügen
Strg + Alt + VVideo einfügen
Strg + Alt + YYouTube einfügen
Strg + Alt + FVollbild ein/aus

Sonstiges #

TasteFunktion
EscVollbild beenden

13. Textkürzel (Autovervollständigung) {#textkuerzel} #

Textkürzel werden im Editor nach einem Leerzeichen automatisch ersetzt.

System-Textkürzel (fest eingebaut) #

KürzelWird ersetzt durch
;datAktuelles Datum (z. B. 06.06.2026)
;datlDatum lang (z. B. Samstag, 6. Juni 2026)
;datkDatum kurz (z. B. 06.06.)
;datmDatum mit Monat (z. B. Juni 2026)
;tagAktueller Wochentag (z. B. Samstag)
;uhrAktuelle Uhrzeit (z. B. 14:30)
;uhrlUhrzeit lang (z. B. 14:30:45)

Eigene Textkürzel #

Eigene Kürzel können über Verwalten → Textkürzel verwalten angelegt werden. Das Kürzel wird ebenfalls nach einem Leerzeichen ausgelöst.

Hinweis: Kürzel funktionieren derzeit nur nach einem Leerzeichen, nicht nach Zeichen wie (, *, </code> oder <code class="inline-code">_</code>.</blockquote>

<h2 id="14-syntax-referenz-syntax-">14. Syntax-Referenz {#syntax} <a class="anchor" href="#14-syntax-referenz-syntax-" aria-label="Link">#</a></h2>

<h3 id="grundlegende-formatierung">Grundlegende Formatierung <a class="anchor" href="#grundlegende-formatierung" aria-label="Link">#</a></h3>

<div class="table-wrap"><table><tr><th>Syntax</th><th>Ergebnis</th></tr><tr><td><code class="inline-code"><strong>Text</strong></code></td><td><strong>Fett</strong></td></tr><tr><td><code class="inline-code"><em>Text</em></code></td><td><em>Kursiv</em></td></tr><tr><td><code class="inline-code">~~Text~~</code></td><td>~~Durchgestrichen~~</td></tr><tr><td>`<code class="inline-code"> </code>code<code class="inline-code"> </code><code class="inline-code"></td><td>Inline-Code</td></tr><tr><td></code> ``<code class="inline-code">code</code>`<code class="inline-code"> </code></td><td>Codeblock</td></tr><tr><td><code class="inline-code"># Überschrift</code></td><td>Überschrift 1</td></tr><tr><td><code class="inline-code">## Überschrift</code></td><td>Überschrift 2</td></tr><tr><td><code class="inline-code">### Überschrift</code></td><td>Überschrift 3</td></tr><tr><td><code class="inline-code">> Zitat</code></td><td>Blockzitat</td></tr><tr><td><code class="inline-code">---</code></td><td>Horizontale Linie</td></tr></table></div> <h3 id="links-und-medien">Links und Medien <a class="anchor" href="#links-und-medien" aria-label="Link">#</a></h3>

<div class="table-wrap"><table><tr><th>Syntax</th><th>Ergebnis</th></tr><tr><td><code class="inline-code">[LinktextVerlinkter Text

Alttext
Alttext
Bild@
Lokales Video
YouTube-Video[vimeo:VIDEO-ID]Vimeo-Video[mp3:datei.mp3]Audioplayer[pdf:datei.pdf]PDF-Viewer

Tabellen #

1 2 3
Spalte 1Spalte 2
Zeile 1Zeile 1

Inhaltsverzeichnis #

1
{toc}

Wird automatisch aus allen #-Überschriften generiert.

Beschreibungsliste (DL) #

1 2 3 4 5
;;Begriff
: Beschreibung
;;!Begriff ohne Farbe
: Beschreibung

Akkordeon-Liste #

1 2
;;>Begriff
: Beschreibung (aufklappbar)

Spalten / Reihen #

1 2 3 4 5
{reihe:2}
Inhalt Spalte 1
[COL]
Inhalt Spalte 2
{/reihe}

15. Kommentare verwalten {#kommentare} #

Der Kommentare-Tab ist pro Artikel verfügbar (nach dem ersten Speichern).

Einstellungen #

OptionBeschreibung
Kommentare aktivierenSchalter zum Aktivieren/Deaktivieren
ZeichenlimitMax. Zeichen pro Kommentar (Standard: 1000)
Rate-LimitMax. Kommentare pro Stunde pro Besucher (Standard: 3)
Kommentare sind DSGVO-konform: Keine IP-Adressen, E-Mails oder Echtname werden gespeichert. Jeder Nutzer erhält einen zufälligen Benutzernamen.

Kommentar-Aktionen #

AktionFunktion
GenehmigenKommentar wird für Besucher sichtbar
AusblendenKommentar wird wieder versteckt
BearbeitenText des Kommentars bearbeiten
LöschenKommentar dauerhaft entfernen
AntwortenAls Admin auf einen Kommentar antworten
Als Admin kommentierenEinen neuen Kommentar als Betreiber verfassen

16. Speichern und Veröffentlichen {#speichern} #

Am unteren Rand des Editors befinden sich die Aktionsbuttons:

ButtonFunktion
VeröffentlichenArtikel wird gespeichert und sofort öffentlich sichtbar
Als Entwurf speichernArtikel wird gespeichert, aber nicht veröffentlicht
AbbrechenZurück zur Übersicht (ungespeicherte Änderungen gehen verloren)
Autosave: Wenn aktiviert, speichert der Editor automatisch in regelmäßigen Abständen als Entwurf. Der Status wird in der Statusleiste angezeigt.