3.3 Der TinyMCE im Detail

3.3 Der TinyMCE im Detail
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. Trotzdem ist es ganz nützlich, ein
wenig HTML zu beherrschen, da der Editor natürlich nur innerhalb der Grenzen von HTML
formatieren kann. Der TinyMCE läuft unter allen aktuellen Browsern. Es ist möglich, auch
andere HTML-Editoren in Joomla! einzubinden, die mit zusätzlichen Funktionen glänzen,
z. B. den MosCE oder TMEdit. Wie Sie diese einbinden können, erfahren Sie weiter unten in
Kapitel 10, Der Joomla!-Baukasten.
Doch zurück zum TinyMCE. Sie sollten nun ein grau unterlegtes Feld mit verschiedenen
Symbolen und ein Textbearbeitungsfeld vor sich sehen. Darüber befinden sich außerdem ein
Formularfeld, in dem Sie den Titel bearbeiten können, und drei sehr wichtige Schaltflächen,
mit denen Sie Ihre Änderungen bestätigen oder verwerfen können (Abbildung 3.3).
Hinweis: Es handelt sich bei unserem Beispiel um ein statisches Textelement. Wenn Sie
dynamischen Inhalt bearbeiten, haben Sie sogar zwei Bearbeitungsfelder vor sich: ein Feld für
den Teaser und eines für den eigentlichen Artikel.
Die Formatierung funktioniert wie in anderen WYSIWYG-Programmen: Sie schreiben einen
Text, markieren diesen und können ihn nun über die Symbolleiste nach Belieben formatieren.
Oder Sie platzieren den Cursor an der passenden Stelle und fügen Objekte wie Tabellen oder
Grafiken ein. Das Ergebnis sollte sofort sichtbar sein.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.3 Der Artikel im Bearbeitungsmodus
Die möglichen Optionen sind zwar weitestgehend intuitiv, werden aber in der Tabelle 3.2
noch einmal beschrieben. Aktionen, wie Links, Tabellen oder Bilder einfügen, sehen wir uns
weiter unten etwas genauer an.
Tabelle 3.2 Die Formatierungsoptionen des TinyMCE
Button
Funktion
Fett; Kursiv; Unterstrichen; Durchgestrichen
Hier klicken, um das Bild zu
vergrößern
Hier klicken, um das Bild zu Linksbündig; Zentriert; Rechtsbündig; Blocksatz
vergrößern
Hier klicken, um das Bild zu CSS-Stile
vergrößern
Formatierung der verschiedenen Überschriften 1 bis 6 sowie
Hier klicken, um das Bild zu
Sonderformate wie z. B. Preformatted
vergrößern
Hier klicken, um das Bild zu Absatz ausrücken, Absatz einrücken
vergrößern
Hier klicken, um das Bild zu Rückgängig; Vorwärts
vergrößern
Hier klicken, um das Bild zu Link einfügen; Link entfernen
vergrößern
Hier klicken, um das Bild zu Anker einfügen
vergrößern
Hier klicken, um das Bild zu Bild einfügen
vergrößern
Hier klicken, um das Bild zu Aufräumen
vergrößern
Hier klicken, um das Bild zu Hilfe
vergrößern
Hier klicken, um das Bild zu Ansicht HTML
vergrößern
Hier klicken, um das Bild zu Vorschau
vergrößern
Hier klicken, um das Bild zu Suchen; Suchen + Ersetzen
vergrößern
Datum einfügen; Zeit einfügen; Emoticon einfügen
Hier klicken, um das Bild zu
vergrößern
Hier klicken, um das Bild zu Horizontale Linie einfügen
vergrößern
Unsichtbare Elemente, z. B. Tabellenhilfslinien anHier klicken, um das Bild zu /ausschalten
vergrößern
Hier klicken, um das Bild zu Hochgestellt, tiefgestellt
vergrößern
Hier klicken, um das Bild zu Sonderzeichen
vergrößern
Hier klicken, um das Bild zu Horizontale Linie mit der Möglichkeit der Detaileinstellung
vergrößern
Hier klicken, um das Bild zu Einfügen einer Flash-Datei
vergrößern
Hier klicken, um das Bild zu Umschalten in die Vollbildansicht
vergrößern
Unter dem Bearbeitungsfeld befindet sich eine Schaltfläche, die für die Strukturierung Ihres
Textes von Bedeutung ist. Denn falls Ihr Artikel zu lang wird und der Leser sehr viel scrollen
müsste, können Sie mit dieser Funktion einen Seitenumbruch erzwingen. Dazu platzieren Sie
den Cursor an der Stelle, an der der Umbruch stattfinden soll, und klicken auf:
Hier klicken, um das Bild zu vergrößern
Nun wird im Text eine Markierung {mospagebreak} eingefügt, die den Artikel in der
Normalansicht an dieser Stelle trennt. Zusätzlich werden dem Artikel Navigationselemente
(wie zum Beispiel ein Übersichtsmenü) beigefügt, die es dem Nutzer ermöglichen, zwischen
den verschiedenen Seiten hin und her zu springen.
Hier klicken, um das Bild zu vergrößern
Hinweis: Elemente im Text, die dem Schema {mos…} folgen, beziehen sich auf Mambots.
Das sind kleine Helferprogramme, die den Inhalt verändern, bevor er ausgegeben wird. Mehr
dazu finden Sie in Abschnitt 7.2, Mambots.
Nachdem Sie Ihren Text bearbeitet haben, müssen Sie noch entscheiden, was damit passieren
soll. Wollen Sie ihn speichern? Oder wollen Sie ihn lieber doch nicht übernehmen? Leider
gibt es keine Funktion, die Ihnen eine »unverbindliche« Vorschau samt Textformatierungen
und Bildern anzeigt. Sie müssen sich ohne diese visuelle Hilfe entscheiden. Hier kommt nun
folgende Werkzeugleiste ins Spiel, die sich jeweils oberhalb und unterhalb des Textfeldes
befindet:
Hier klicken, um das Bild zu vergrößern
Mit einem Klick auf die Diskette speichern Sie Ihre Änderungen, verlassen den
Bearbeitungsmodus und kehren zur Normalansicht der Website zurück. Die mittlere Option
bewirkt ebenfalls ein Abspeichern, Sie bleiben jedoch im Bearbeitungsmodus. Diese Option
hat zwei Vorteile. Zum einen können Sie Ihre Zwischenergebnisse im Arbeitsprozess bereits
öffentlich machen, zum anderen würde Ihnen der abgespeicherte Text nicht mehr verloren
gehen, falls es z. B. zu unvorhersehbaren Problemen mit der Internetverbindung kommt. Mit
der dritten Funktion, dem roten Kreuz, verwerfen Sie Ihre Änderungen.
Es ist wichtig, dass Sie Ihren Bearbeitungsprozess ordnungsgemäß abschließen, da Sie sonst
mit der Meldung aus Abbildung 3.4 konfrontiert und daran gehindert werden, den
Editiermodus zu verlassen.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.4 Fehlermeldung beim Verlassen des Editiermodus
Achtung: Es kann passieren, dass Sie diese Fehlermeldung immer wieder erhalten, obwohl
Sie die Bearbeitung richtig beendet haben. In diesem Fall sollten Sie im Browser JavaScript
deaktivieren, nochmals speichern oder abbrechen und dann JavaScript wieder aktivieren.
3.4 Links einfügen
Was wäre ein Hypertext ohne Links? Joomla! stellt für dieses wichtige Element eine recht
komfortable Dialogführung bereit. Entscheidend für das Setzen von Links sind diese drei
Schaltflächen:
Hier klicken, um das Bild zu vergrößern
Um einen Link einzufügen, müssen Sie zunächst das Stück Text oder ein Bild markieren, das
in der Normalansicht angeklickt werden soll. Erst dann werden die beiden linken Symbole
aktiviert. Danach klicken Sie auf das Symbol Insert Link (die Kette ganz links). Im sich nun
öffnenden Dialogfenster (Abbildung 3.5) können Sie alle wichtigen Optionen einstellen.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.5 Einen Link einfügen
Im ersten Textfeld ist die URL der Zielseite gefragt. Dabei ist zu unterscheiden, ob Sie eine
externe Seite oder eine Seite aus Ihrer Joomla!-Installation verlinken wollen. Bei externen
Verweisen müssen Sie auf alle Fälle die komplette URL (mit http://) eingeben.
Bei internen Verweisen reicht es, den Pfad ab index.php anzugeben. Falls sich auf einer Seite
Anker befinden, können Sie diese über die Dropdown-Liste Anchors ansprechen. Target
klärt die Frage, in welchem »Rahmen« das Zielobjekt geöffnet werden soll, also ob z. B. eine
neue Browserinstanz gezeigt werden soll. Der Text, den Sie in Title angeben, wird von vielen
Browsern als Flyout-Text ausgegeben, wenn sich der Mauszeiger über den Link bewegt. Im
Feld Class können Sie, falls der Editor entsprechend konfiguriert ist (vgl. Abschnitt 7.2.12,
TinyMCE WYSIWYG Editor), den Link einer CSS-Klasse zuordnen und damit formatieren.
Falls Sie Ihre Zielseite über ein JavaScript-Fenster anzeigen lassen wollen, ist der zweite
Reiter Popup (Abbildung 3.6) für Sie interessant. Der Vorteil ist, dass Sie hier wesentlich
mehr Einflussmöglichkeiten auf Position, Größe oder Fensterelemente haben.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.6 Popup-Optionen für die Zielseite
Das dritte Register, Events, hat ebenfalls mit dem Einbinden von JavaScript-Effekten zu tun.
Hier kann man die Reaktionen auf bestimmte Maus-, Tasten- oder Fokusereignisse eingeben
(Abbildung 3.7).
Hier klicken, um das Bild zu vergrößern
Abbildung 3.7 JavaScript-Ereignisse
Leider muss man schon ein wenig JavaScript-Kenntnisse mitbringen oder zumindest ein
Referenzbuch zu Rate ziehen, bevor man mit diesen Optionen arbeitet.
Das letzte Register, Advanced, behandelt die fortgeschrittenen Eigenschaften, wie z. B.
Spracheinstellungen.
3.5 Tabellen einfügen
Werfen wir einen kurzen Blick auf die Tabellenbearbeitung im Editor. Denn Tabellen erfüllen
nicht nur ihre üblichen Aufgaben, wie z. B. die Darstellung von Teilnehmerlisten, sondern
sind darüber hinaus nach wie vor wichtige (unsichtbare) Strukturierungselemente für eine
HTML-Seite.
Beim Klick auf das Icon Tabelle einfügen in der Symbolleiste können Sie im folgenden
Dialogfenster die gängigen Tabelleneigenschaften bestimmen (Abbildung 3.8). Diese
kommen Ihnen sicherlich bekannt vor, wenn Sie schon einmal mit HTML gearbeitet haben;
Sie finden hier z. B. die Anzahl der Spalten und Zeilen, den Abstand der Schrift zum
Zellenrand (Cellspacing), den Abstand zwischen den Zellen (Cellpadding), die Ausrichtung,
die Höhe und die Breite.
Die Ausmaße der Tabelle können Sie entweder in Prozent angeben oder ohne Prozentzeichen
als absolutes Maß in Pixel.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.8 Grundlegende Tabelleneigenschaften
Über den Reiter Advanced haben Sie die Möglichkeit, weitergehende Einstellungen (wie
z. B. ein Hintergrundbild oder die Rahmenfarbe) festzulegen.
Das Symbol Inserts a new table ist übrigens auch zuständig, wenn Sie die bestehende
Tabelle im Nachhinein ändern wollen: Klicken Sie in die Tabelle und dann auf das Icon.
Die Größe der erstellten Tabelle können Sie an den kleinen, weißen Eckquadraten durch
Ziehen mit der Maus beeinflussen.
Achtung: Wenn die Tabelle das erste Element ist, das in das Bearbeitungsfeld eingefügt
wurde (wie in Abbildung 3.9), ist es im Browser Firefox schwierig, die Tabelle einfach zu
löschen. Geben Sie direkt vor der Tabelle in der ersten Zeile ein (Leer-)Zeichen ein. Dann
dürfte es wieder funktionieren.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.9 Die fertige, markierte Tabelle
Andere grundlegende Tabellenformatierungen, wie zum Beispiel die Farbgestaltung der
einzelnen Zeilen oder Zellen und das Verbinden von Zellen erledigen Sie ebenfalls über die
Symbolleiste:
Tabelle 3.3 Die Funktionen für die Formatierung der Tabellen
Symbol
Funktion
Hier klicken, um das Bild zu Einfügen/Verändern einer Tabelle
vergrößern
Hier klicken, um das Bild zu Zeileneigenschaften; Zelleneigenschaften
vergrößern
Einfügen einer Reihe oberhalb; Einfügen einer Reihe
Hier klicken, um das Bild zu unterhalb; Entfernen einer Reihe
vergrößern
Einfügen einer Spalte links; Einfügen einer Spalte rechts;
Hier klicken, um das Bild zu Entfernen einer Spalte
vergrößern
Hier klicken, um das Bild zu Teilen einer Zelle; Verbinden einer Zelle
vergrößern
3.6 Bilder einbinden
Sie haben sicherlich schon einen Blick auf die untere Hälfte der Bearbeitungsseite geworfen
und sich davon überzeugt, dass man natürlich auch Bilder in den Artikel einbinden kann.
Joomla! bietet Ihnen dafür sogar zwei Wege an.
Hinweis: Beide Möglichkeiten betreffen im TinyMCE-Editor nur Bilddateien, die sich bereits
auf dem Webserver befinden. Sie können keine neuen Bilder über das Frontend einfügen.
3.6.1 Über die Symbolleiste
Zum einen gibt es das Icon Bild einfügen in der Symbolleiste. Diese Funktion fügt im
Hintergrund ein ganz normales <img>-Tag ein, dessen Parameter Sie über den Dialog aus
Abbildung 3.10 im Register General bestimmen können.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.10 Bilder über die Symbolleiste einfügen
Am wichtigsten ist die Angabe des Pfades zu der Bilddatei. Leider ist es ein wenig
umständlich und darüber hinaus fehleranfällig, den richtigen Pfad eigenständig in das dafür
vorgesehene Feld einzutippen. Das in Abbildung 3.11 gezeigte Beispiel können Sie selbst
ausprobieren, da das Bild coffee.jpg bei der Joomla!-Installation mitgeliefert wird. Sie können
aber auch eigene Dateien in die Ordner kopieren und mit der entsprechenden Pfadangabe
hochladen.
Über den Reiter Appearance werden die Bildparameter wie z. B. Ausrichtung, Rahmen und
Größe festgelegt, die sich ebenfalls an die HTML-Markups anlehnen.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.11 Hier erfolgen die Detaileinstellungen des Bildes.
Wie der Name schon sagt, können Sie im Register Advanced einige fortgeschrittene
Techniken des Webdesigns nutzen, die nicht mehr zum Standardrepertoire von HTML zählen.
Dazu gehören z. B. Bildwechsel bei Mausereignissen oder die Vergabe einer ID.
Nachdem Sie Ihre gewünschten Einstellungen vorgenommen haben, setzen Sie mit dem
Button Insert Ihre Einstellungen um und fügen das Bild ein oder brechen den Dialog mit
Cancel unverrichteter Dinge ab.
Den Vorteil dieser Methode der Bildintegration sehen Sie sofort, denn im Gegensatz zum im
Folgenden beschriebenen Weg ist das Bild auch im Bearbeitungsmodus sichtbar.
3.6.2 Über das Register Bilder
Nun kommen wir zu der zweiten, etwas komfortableren Art, ein Bild einzubinden. Dafür
werden wir das oberste Register Bilder des Registerstapels im unteren Bereich der
Bearbeitungsseite zu Hilfe nehmen.
Damit Sie im Bearbeitungsmodus des Frontends auf das Bild zugreifen können, müssen Sie es
zuvor über den Media Manager im Backend hochgeladen haben (Abschnitt 6.3, Eigene Bilder
einbinden). Das linke Listenfeld Galerie – Bilder (Abbildung 3.12), das Sie im Frontend vor
sich sehen, zeigt die Bilder aus dem Standard-Bildordner images/stories an. Dies sind die
Grafiken, die Sie einbinden können. Sie haben aber auch die Möglichkeit, in ein
Unterverzeichnis zu wechseln und die dortigen Grafikdateien anzeigen zu lassen.
Hier klicken, um das Bild zu vergrößern
Abbildung 3.12 Das Register Bilder
Fügen Sie die Bilder, die Sie in den aktuellen Artikel einfügen möchten, mit der oberen
Pfeiltaste oder der Schaltfläche Einfügen in die rechte Liste Inhalt – Bilder ein. Damit legen
Sie fest, in welcher Reihenfolge die Bilder im Text angezeigt werden. Mittels Hinauf und
Hinunter können Sie diese neu ordnen. In der Liste Bild bearbeiten besteht die Möglichkeit,
Eigenschaften wie die Ausrichtung, den Rahmen oder die Bildunterschrift zu konfigurieren.
Um die Grafiken nun tatsächlich im Text unterzubringen, bewegen Sie den Cursor im
Textfeld an die Stelle, an der ein Bild eingefügt werden soll, und klicken auf folgenden
Button:
Hier klicken, um das Bild zu vergrößern
Es wird nun der Platzhalter {mosimage} eingefügt. Alternativ können Sie diese Variable auch
per Hand in das Textfeld eingeben. Damit haben Sie das erste Bild aus Ihrer Liste Inhalt –
Bilder eingebunden. Entsprechend der Anzahl der restlichen Bilder sollten Sie nun weitere
Platzhalter einfügen.
Hinweis: Der Platzhalter {mosimage} ist ganz neutral und besitzt keinerlei Bindung zu einem
bestimmten Bild. Die Reihenfolge der eingefügten Bilder wird allein über die Liste Inhalt –
Bilder festgelegt. Möchten Sie ein Bild mehrere Male im Text einbinden, muss es auch
entsprechend oft in der Liste stehen. Es ist allerdings nicht möglich, zweimal das gleiche Bild
in die Liste einzufügen. Sie müssen dafür zu einem kleinen Trick greifen: Klicken Sie
irgendein Bild in der Liste Inhalt – Bilder an, und geben Sie den Namen des Bildes, das
schon in der Liste steht, rechts im Textfeld Quelle ein. Die Liste Inhalt – Bilder wird sich
dieser Eingabe anpassen.