WYSIWYG Editor

WYSIWYG steht für What You See Is What You Get — was du im Editor siehst entspricht dem was Besucher später sehen. WBCE nutzt den CKEditor — einen der verbreitetsten Browser-Editoren.

Die Toolbar

Die Toolbar bietet alle wichtigen Formatierungsmöglichkeiten:

Text formatieren:

B  → Fett
I  → Kursiv
U  → Unterstrichen
S  → Durchgestrichen

Struktur:

H1 H2 H3  → Überschriften
¶         → Absatz
─         → Horizontale Linie

Listen:

• → Aufzählungsliste
1. → Nummerierte Liste

Einfügen:

🔗 → Link einfügen
🖼️ → Bild einfügen
📊 → Tabelle einfügen
</> → Quellcode anzeigen

Text eingeben

Klicke in den Editor und schreibe. Enter erzeugt einen neuen Absatz — Shift+Enter einen Zeilenumbruch.

Link einfügen

  1. Text markieren
  2. Link-Symbol klicken
  3. URL eingeben oder interne Seite auswählen
  4. OK

Tipp: Für interne Links immer den internen Link-Typ wählen — dann funktionieren Links auch wenn die Domain wechselt.

Bild einfügen

  1. Cursor an die gewünschte Stelle setzen
  2. Bild-Symbol klicken
  3. Hochladen oder Aus Medien wählen
  4. Bild auswählen
  5. Größe und Ausrichtung einstellen
  6. OK

Tabelle einfügen

  1. Tabellen-Symbol klicken
  2. Zeilen und Spalten eingeben
  3. OK
  4. Zellen befüllen

Quellcode anzeigen

Klicke auf </> um den HTML-Quellcode zu sehen und direkt zu bearbeiten.

Achtung: CKEditor kann beim Zurückwechseln HTML-Strukturen verändern. Komplexes HTML nur über den Quellcode einfügen und dort belassen.

Häufige Probleme

Formatierung übernommen beim Einfügen: Text aus Word oder anderen Quellen bringt oft unerwünschte Formatierungen mit. Lösung: Text zuerst in einen Texteditor (Notepad) einfügen, dann von dort in CKEditor kopieren.

Leere Absätze nach Tabellen: CKEditor fügt manchmal leere <p> Tags nach Tabellen ein. Im Quellcode manuell entfernen.

Nächster Schritt: Abschnitte verwalten — mehrere Inhaltsbereiche kombinieren