2.3. Der visuelle Editor

Ein visueller Editor (oder auch WYSIWYG - What you see is what you get - genannt) ist ein Editor ohne Steuerungszeichen (HTML, Wiki-Tags). Dabei orientiert sich der Aufbau der Editierleiste an gängigen Textverarbeitungsprogrammen.

Technisches Hintergrundwissen

Auch BlueSpice verfügt über einen zuschaltbaren WYSIWYG-Editor. Wir verwenden den verbreiteten Standard-Editor Tiny MCE, der u. a. auch in Content-Management-Systemen wie Joomla! zum Einsatz kommt. Der TinyMCE ist ein kleines grafisches Textverarbeitungsprogramm, das es ermöglicht, die Eingaben im Formularfeld ohne HTML-Tags oder andere Kürzel zu formatieren, also z.B. die Schriftgröße zu verändern oder Tabellen zu erstellen.


Wie finde ich den Visuellen Editor?

Wenn Sie in den Bearbeitungsmodus eines Artikels wechseln, sehen Sie zunächst einmal den Wiki-Code vor sich. Um den WYSIWYG-Editor zu aktivieren, klicken Sie auf folgende Schaltfläche:


Btn-Wikicode-WYSIWYG.png


Der bereits bestehende Text des Artikels wird nun mit seiner Formatierung angezeigt. Über dem Eingabefeld sehen Sie eine neue Symbolleiste.

Screenshot: Der WYSIWYG-Editor von BlueSpice

Funktionen des Editors

Der Editor funktioniert genauso, wie Sie es von den gängigen Textverarbeitungsprogrammen gewohnt sind:

Sie markieren das zu verändernde Element und wählen dann die entsprechende Schaltfläche aus, z.B. den Fettdruck. Sofort wird die Formatierung sichtbar. Die Hallo Welt! implementiert den WYSIWYG-Editor standardmäßig nur als zuschaltbaren Editor, um die vielfältigen Gestaltungsmöglichkeiten des MediaWikis nicht einzuschränken. Achtung: Sogenannte Tags beispielsweise werden in der WYSIYG-Ansicht lediglich farbig unterlegt; erst bei der Vorschau oder beim Abspeichern wird das endgültige "Bild" sichtbar.

Grundlegende Funktionen

Schaltfläche Funktion
Btn-WYSIWYG-Wikitext.png in die Bearbeitung des Wiki-Codes zurückschalten
Btn-WYSIWYG-Speichern.png speichern
Btn-WYSIWYG-Rückgängig.pngBtn-WYSIWYG-Wiederholen.png rückgängig; wiederherstellen
Btn-WYSIWYG-SuchenundErsetzen.png suchen und ersetzen
Btn-WYSIWYG-CopyandPaste.png formatierten Text (z.B. aus Word) einfügen
Btn-WYSIWYG-Signatur.png Unterschrift/ Signatur mit Zeitstempel einfügen
Btn-WYSIWYG-InsertLink.png Link einfügen oder bearbeiten; Wie Sie Links zu allen möglichen Seiten einfügen, erfahren Sie auf der Seite InsertLink.
Btn-WYSIWYG-Link entfernen.png Link entfernen
Btn-WYSIWYG-InsertMagic.png Spezielle Wiki Befehle (tags und MagicWords) schneller einbinden. Erfahren Sie mehr auf Insert Magic
Btn-WYSIWYG-InsertImage.png Bild einfügen; über die Funktion InsertImage kann man Bilder hochladen & einbinden.
Btn-WYSIWYG-InsertFile.png Datei einfügen
Btn-WYSIWYG-InsertCategory.png Kategorie einfügen; Über das Feature Insert Category erhalten Sie einen Überblick über bestehende Kategorien und können diese einem Artikel zuordnen.
Btn-WYSIWYG-CheckboxChecklist.png Checkboxen oder Checklisten einfügen (Checklisten sind über den Pfeil verfügbar)
Btn-WYSIWYG-Tabelle einfügen.png Tabelle einfügen (über den Pfeil sind "Tabelleneigenschaften" und "Tabelle löschen" verfügbar)
Btn-WYSIWYG-Tabellenfunktionen.png Zeile oberhalb hinzufügen, Zeile unterhalb hinzufügen, Zeile löschen; Spalte links hinzufügen, Spalte rechts hinzufügen, Spalte löschen; Weitere Tabellenfunktionen finden Sie bei dem Button "Formate".
Btn-WYSIWYG-Fett.pngBtn-WYSIWYG-Kursiv.pngBtn-WYSIWYG-Unterstrichen.pngBtn-WYSIWYG-Durchgestrichen.png fett; kursiv; unterstrichen; durchgestrichen
Btn-WYSIWYG-Aufzählung.png Btn-WYSIWYG-Nummerierte Liste.png Aufzählung; Numerierte Liste
Btn-WYSIWYG-Einzug verkleinern.pngBtn-WYSIWYG-Einzug vergrößern.png Einzug verkleinern; Einzug vergrößern
Btn-WYSIWYG-Symbol.png Sonderzeichen/Symbole einfügen
Btn-WYSIWYG-Zeilenumbruch.png Zeilenumbruch einfügen
Btn-WYSIWYG-Formate.png Überschriften; Zeichenformate; Ausrichtung (linksbündig; zentriert; rechtsbündig); Tabelle (Standard, Sortierbar, Graustufen; vorformatierter Text (umrandet den Text mit einem Kasten und hebt den Text als "wikicode" hervor).
Btn-WYSIWYG-Überschriften.png Überschriftenebene festlegen
Btn-WYSIWYG-Schriftfarbe.png Schriftfarbe
Btn-WYSIWYG-Formatierung entfernen.png Formatierung entfernen
Btn-WYSIWYG-Vollbild.png Im Vollbildmodus bearbeiten

Mit Word arbeiten

Das Konvertieren von Word-Dokumenten in Wiki-Code ist mit BlueSpice möglich. Dafür kopiert man in der Regel einfach den Inhalt des Word-Dokumentes in den Editor in der WYSIWYG-Ansicht. Dies funktioniert ebenso für einfache Excel-Tabellen.

Mit Tabellen arbeiten

So unkompliziert der Wiki-Code bei anderen Formatierungen sein mag, bei Tabellen stellt er ein echtes Manko dar. Im WYSIWYG können Sie dagegen schnell und unkompliziert mit Tabellen arbeiten. Bedenken Sie, dass die meisten Buttons bezüglich der Tabellenformatierung erst aktiv werden, wenn eine Tabelle markiert ist.

Tipps zum Arbeiten mit dem WYSIWYG

  • Ein WYSIWYG-Editor erleichtert vor allem die Arbeit mit Tabellen und Bildern. Bei komplexen Seiten empfehlen wir, mit normalen Wiki-Tags zu arbeiten.
  • Der TinyMCE ist ein Webeditor und kann daher nicht für den reibungslosen Ablauf wie bei einer Desktopanwendung wie z.B. Word garantieren. Seien Sie daher tolerant und freuen Sie sich, dass der Editor Ihnen zumindest ein wenig die Arbeit erleichtert.
  • Den Editor können Sie in Ihren persönlichen Einstellungen => BlueSpice => VisualEditor standardmäßig aktivieren.
  • Der visuelle Editor verfügt nun über eine Rechtschreibprüfung

Anhänge

Diskussionen