Der Editor TinyMCE
Der Editor TinyMCE kommt an verschiedenen Stellen zum Einsatz:
- beim Bearbeiten oder Erstellen von Beiträgen im Backend
- beim Bearbeiten von Kategorien im Backend
- beim Bearbeiten von Beiträgen im Frontend
Die Funktionalität des Editors ist in allen diesen Fällen im Wesentlichen identisch, abhängig vom Einsatzfall sind jedoch nicht alle im Folgenden beschriebenen Funktionen verfügbar.
Der Editor-Bereich sieht beim Bearbeiten oder Erstellen von Beiträgen wie folgt aus:

Die genaue Verteilung der Knöpfe oberhalb des Textbereichs hängt von der Breite des Textbereichs ab. Nachfolgend beschreibe ich eine Gruppe von Knöpfen nach der anderen, dabei stelle ich sie alle nebeneinander dar, auch wenn sie in der Darstellung oben sowie dann auch bei Deiner Nutzung ggf. über zwei Zeilen verteilt sein können. Aber ich hoffe, Du kannst sie trotzdem identifizieren und der jeweiligen Beschreibung zuordnen.
Wenn Du Dir die Knöpfe oberhalb des Textbereichs anschaust, dann werden Dir viele dieser Knöpfe aus anderen Programmen wie MS Word (bis Office 2003), OpenOffice oder LibreOffice bekannt vorkommen. Keine Angst: wenn die Knöpfe gleich oder ähnlich aussehen, dann machen sie auch das gleiche, Du musst also nicht komplett umlernen! Wenn Du mit der Maus über die Knöpfe fährst, dann wird Dir jeweils angezeigt, welche Funktion hinter dem Knopf steckt.

In der ersten Gruppe von Knöpfen befinden sich 4 Abschnitte:
1: Über diese 4 Knöpfe kannst Du die Text-Attribute (von links) Fett, Kursiv, Unterstrichen und Durchgestrichen ein- bzw. ausschalten.
2: Über diese 4 Knöpfe kannst Du die Ausrichtung eines Absatzes einstellen, der Standardwert (keiner der Knöpfe ist aktiv) ist die linksbündige Ausrichtung. Die Knöpfe entsprechend (von links): linksbündige Ausrichtung, zentrierte Ausrichtung, rechtsbündige Ausrichtung und Blocksatz.
3: In dieser Auswahl-Liste findest Du einige Format-Klassen, die Du an Textbereiche zuweisen kannst. Am Anfang der Liste findest Du mehrere Untermenüs („Überschriften“, „Zeichenformate“, „Absatzformate“ und „Ausrichtung“), die dort zu findenden Einträge sollte selbsterklärend sein (sie stehen auch über die anderen Abschnitte in dieser Toolbar zur Verfügung).
Daran anschließend findest Du eine Reihe von Format-Klassen, Details dazu kannst Du der nachfolgenden Tabelle entnehmen:
| Klasse | Bedeutung / Verwendung |
|---|---|
| div.caption | interne Nutzung, bitte ignorieren |
| code | interne Nutzung, bitte ignorieren |
| hr.system-pagebreak | interne Nutzung, bitte ignorieren |
| table.ja-typo-table | Nutzung im Zusammenhang mit Tabellen, siehe unten „Tabelle erstellen/bearbeiten“ |
| table.table-rounded | Nutzung im Zusammenhang mit Tabellen, siehe unten „Tabelle erstellen/bearbeiten“ |
| table.ja-typo-table.table-rounded | Nutzung im Zusammenhang mit Tabellen, siehe unten „Tabelle erstellen/bearbeiten“ |
| tr.first | Nutzung im Zusammenhang mit Tabellen, siehe unten „Eigenschaften der Zeile“ |
| tr.last | Nutzung im Zusammenhang mit Tabellen, siehe unten „Eigenschaften der Zeile“ |
| th.first | Nutzung im Zusammenhang mit Tabellen, siehe unten „Eigenschaften der Zelle“ |
| th.last | Nutzung im Zusammenhang mit Tabellen, siehe unten „Eigenschaften der Zelle“ |
| th.first.last | Nutzung im Zusammenhang mit Tabellen, siehe unten „Eigenschaften der Zelle“ |
| td.first | Nutzung im Zusammenhang mit Tabellen, siehe unten „Eigenschaften der Zelle“ |
| td.last | Nutzung im Zusammenhang mit Tabellen, siehe unten „Eigenschaften der Zelle“ |
| td.first.last | Nutzung im Zusammenhang mit Tabellen, siehe unten „Eigenschaften der Zelle“ |
| a.extlink | Nutzung im Zusammenhang mit Verweisen auf externe Seiten, siehe unten „Link einfügen/bearbeiten“ |
| a.intlink-arrow | Nutzung im Zusammenhang mit Verweisen auf interne Seiten oder Dokumente, siehe unten „Link einfügen/bearbeiten“ |
| ul.ja-unordered-list | Nutzung im Zusammenhang mit unsortierten Listen, siehe unten „Unsortierte Liste“ |
| ul.ja-unordered-list.compact | Nutzung im Zusammenhang mit unsortierten Listen, siehe unten „Unsortierte Liste“ |
| ol.ja-ordered-list | Nutzung im Zusammenhang mit sortierten Listen, siehe unten „Sortierte Liste“ |
| ol.ja-ordered-list.compact | Nutzung im Zusammenhang mit sortierten Listen, siehe unten „Sortierte Liste“ |
| p.box-exclam | interne Nutzung, bitte ignorieren |
| p.box-info | interne Nutzung, bitte ignorieren |
| li.icon-user | wird für die Kontaktdaten genutzt, bitte ansonsten ignorieren |
| li.icon-group | wird für die Kontaktdaten genutzt, bitte ansonsten ignorieren |
| li.icon-address | wird für die Kontaktdaten genutzt, bitte ansonsten ignorieren |
| li.icon-phone | wird für die Kontaktdaten genutzt, bitte ansonsten ignorieren |
| li.icon-mobi | wird für die Kontaktdaten genutzt, bitte ansonsten ignorieren |
| li.icon-fax | wird für die Kontaktdaten genutzt, bitte ansonsten ignorieren |
| li.icon-email | wird für die Kontaktdaten genutzt, bitte ansonsten ignorieren |
Ob einem Text eine dieser Format-Klassen zugewiesen ist, kannst Du erkennen, indem Du den Cursor in den Text positionierst und dann die Auswahl-Liste öffnest. Wenn eine Format-Klasse links mit einem dunkelgrauen Balken markiert ist, dann ist diese Format-Klasse dem Text, in dem der Cursor steht, zugewiesen. Zum Entfernen dieser Format-Klasse genügt es abhängig von der Art der Format-Klasse oft, die Format-Klasse in der Liste auszuwählen, manchmal ist es auch notwendig, zuvor den Text, von dem Du die Format-Klasse entfernen willst, zu markieren und dann wie beschrieben vorzugehen.
Wenn Du einem Text eine Format-Klasse zuweisen willst, dann positioniere den Cursor in den Text und öffne die Auswahl-Liste. Wenn eine Format-Klasse beim Überfahren mit der Maus blau hinterlegt wird, dann kannst Du diese Format-Klasse dem Text, in dem der Cursor steht, zuweisen. Wenn die Format-Klasse jedoch beim Überfahren mit der Maus grau hinterlegt wird, dann lässt sich diese Format-Klasse nicht zuweisen. Für manche Format-Klassen ist es notwendig, den Text, der damit versehen werden soll, zuvor zu markieren.
4: In dieser Auswahl-Liste findest Du die wichtigsten Absatz-Typen:
- Absatz: normaler Text-Absatz (der häufigste Absatz-Typ)
- Überschrift 1: Überschrift 1. Ordnung, sollte bei uns weder in Beiträgen noch in Kategorien eingesetzt werden
- Überschrift 2: Überschrift 2. Ordnung, übliche Überschrift für Beiträge und Kategorie-Texte
- Überschrift 3: Überschrift 3. Ordnung, kann zur Untergliederung von Beiträgen verwendet werden
- Überschrift 4: Überschrift 4. Ordnung, kann zur Untergliederung von Beiträgen verwendet werden, sollte auch für die Überschrift von Zusammenfassung von Beiträgen verwendet werden
- Überschrift 5: Überschrift 5. Ordnung
- Überschrift 6: Überschrift 6. Ordnung
- Preformatted: Absatz mit Rohdaten, etwa einem Programm-Ausschnitt (für uns nicht relevant, bitte ignorieren)

In der zweiten Gruppe von Knöpfen befinden sich 11 Abschnitte:
1: Mit diesem Knopf kannst Du nach einem Text im aktuell bearbeiteten Beitrag suchen und ihn bei Bedarf an einzelnen Stellen oder im gesamten Beitrag durch einen anderen Text ersetzen.
2:Mit diesen beiden Knöpfen kannst Du unsortierte und sortierte Listen einfügen:
- Mit dem linken Knopf kannst Du eine unsortierte Liste (das ist eine Liste mit Bullets vor den einzelnen Absätzen) beginnen, von den auswählbaren Typen ist nur der Typ „Standard“ verwendbar. Um eine auf unseren Seiten einheitliche Darstellung solcher Listen zu erhalten, musst Du nach dem Drücken dieses Knopfes aus der bei der ersten Toolbar-Zeile mit „3“ bezeichneten Auswahl-Liste den Eintrag „ul.ja-unordered-list“ oder den Eintrag „ul.ja-unordered-list.compact“ auswählen.
- Wenn Du den Eintrag „ul.ja-unordered-list“ auswählst, dann erhältst Du zwischen den einzelnen Einträgen der Liste einen Abstand, der genauso groß ist wie der Abstand zwischen zwei Absätzen.
- Wenn Du den Eintrag „ul.ja-unordered-list.compact“ auswählst, dann erhältst Du zwischen den einzelnen Einträgen der Liste einen kleineren Abstand (kompakte Liste), der Abstand zum nachfolgenden Absatz ist genauso groß wie der Abstand zwischen zwei Absätzen.
- Mein Tipp: ausprobieren, was im Einzelfall besser aussieht!
- Mit dem rechten Knopf kannst Du eine sortierte Liste (das ist eine Liste mit den Zahlen „1.“, „2.“, „3.“ usw. vor den einzelnen Absätzen) beginnen, von den auswählbaren Typen solltest Du nur den Typ „Standard“ verwenden (die anderen Typen funktionieren jedoch grundsätzlich auch). Um eine auf unseren Seiten einheitliche Darstellung solcher Listen zu erhalten, musst Du nach dem Drücken dieses Knopfes aus der bei der ersten Toolbar-Zeile mit „3“ bezeichneten Auswahl-Liste den Eintrag „ol.ja-ordered-list“ oder den Eintrag „ol.ja-ordered-list.compact“ auswählen.
- Wenn Du den Eintrag „ol.ja-ordered-list“ auswählst, dann erhältst Du zwischen den einzelnen Einträgen der Liste einen Abstand, der genauso groß ist wie der Abstand zwischen zwei Absätzen.
- Wenn Du den Eintrag „ol.ja-ordered-list.compact“ auswählst, dann erhältst Du zwischen den einzelnen Einträgen der Liste einen kleineren Abstand (kompakte Liste), der Abstand zum nachfolgenden Absatz ist genauso groß wie der Abstand zwischen zwei Absätzen.
- Mein Tipp: ausprobieren, was im Einzelfall besser aussieht!
- Im Prinzip kannst Du unsortierte und sortierte Listen mischen (also z.B. in der ersten Ebene eine sortierte Liste und dann in der zweiten Ebene eine unsortierte Liste verwenden), wie das im Einzelnen aussieht, probierst Du am besten selbst aus. Grundsätzlich sind auch kompakte Listen mischbar.
3: Mit diesen beiden Knöpfen kannst Du Absätze einrücken (rechter Knopf) oder wieder ausrücken (linker Knopf). Das funktioniert für normale Absätze wie gewünscht, das Einrücken ist aber nicht mit allen anderen Elementen einer Seite kombinierbar (Tabellen, Listen etc.). Was geht und was nicht, probierst Du am besten selbst aus.
4: Mit dem linken Knopf kannst Du die letzte Änderung rückgängig machen, etwa wenn beim Bearbeiten eines Elements etwas schief gegangen ist. Mit dem rechten Knopf kannst Du die letzte mit dem linken Knopf rückgängig gemachte Änderung erneut anwenden.
5: Mit dem linken Knopf kannst Du einen Verweis einrichten, dazu schreibst Du zuerst den Text, den Du mit dem Verweis versehen willst, dann markierst Du diesen Text und drückst den linken Knopf. Daraufhin wird ein Pop-Up Fenster mit einigen Feldern angezeigt.
- Im Feld „URL“ trägst Du das Ziel des Verweises ein, das kann ein externes Ziel (eine andere Website) oder eine andere Seite unserer Website oder ein Dokument auf unserer Website sein.
- Im Feld „Anzuzeigender Text“ wird der Text angezeigt, den Du mit dem Verweis versehen willst, Du kannst ihn an dieser Stelle noch bei Bedarf ändern.
- Im Feld „Titel“ kannst Du eine Erläuterung zum Verweis eintragen, diese Erläuterung wird im Browser angezeigt, wenn man mit der Maus über den Verweis fährt.
- Im Feld „Rel„brauchst Du nichts ändern, die Voreinstellung „Keine“ ist im Allgemeinen in Ordnung. Wenn Du willst, dann kannst Du bei externen Zielen den Wert „No Follow“ auswählen.
- Im Feld „Ziel“ stellst Du für externe Ziele den Wert „Neues Fenster“ ein, für interne Ziele stellst Du normalerweise „Keine“ ein (in speziellen Fällen, etwa bei Verweisen auf Dokumente, kannst Du auch bei internen Zielen den Wert „Neues Fenster“ einstellen).
Wenn Du einen Verweis auf eine andere Seite unserer Website einrichten willst, dann musst Du immer auf den Menü-Eintrag dieser Seite verweisen. Um den zutreffenden Verweis zu erhalten, gehst Du am besten wie folgt vor:
1. Du rufst in einem anderen Browser-Fenster oder -Tab die entsprechende Seite auf.
2. In der Adresszeile Deines Browsers wird Dir eine Adresse der Form
http://www.tsv-waldtrudering.de/<weiterer Pfad>
angezeigt.
3. Markiere den oben als „<weiterer Pfad>“ bezeichneten Teil der Adresse mit der Maus und kopiere den markierten Pfad mittels Strg-C in den Zwischenspeicher.
4. Wechsle dann in das Fenster, in dem Du den Beitrag bearbeitest und bereits das Pop-Up Fenster zum Einrichten des Verweises geöffnet hast.
5. Positioniere den Cursor in das Feld „URL“ und füge den Inhalt des Zwischenspeichers mittels Strg-V in dieses Feld ein.
Wenn der Verweis auf ein externes Ziel zeigt, dann musst Du anschließend aus der bei der ersten Toolbar-Zeile mit „3“ bezeichneten Liste den Eintrag „a.extlink“ auswählen, damit vor dem Verweis eine kleine Weltkugel dargestellt wird als Symbol dafür, dass es sich um einen Verweis auf eine fremde Seite handelt.
Wenn der Verweis auf ein internes Dokument zeigt, dann kannst Du diesen Verweis mit einem kleinen Pfeil vor dem Verweis kennzeichnen. Dazu wählst Du aus der bei der ersten Toolbar-Zeile mit „3“ bezeichneten Liste den Eintrag „a.intlink-arrow“ aus.
Mit dem rechten Knopf kannst Du einen bestehenden Verweis löschen. Dazu positionierst Du den Cursor mit der Maus oder den Cursortasten in den Text, der mit dem Verweis versehen ist, und klickst dann auf den rechten Knopf.
6: Mit diesem Knopf kannst Du innerhalb der aktuellen Seite einen Anker setzen. Ein Anker ist ein Sprungziel innerhalb einer Seite, dieses Sprungziel kannst Du dann über einen Verweis ansteuern. Eine typische Anwendung eines Ankers ist das Setzen des Sprungziels „top“ am Beginn eines längeren Beitrags und das Einfügen von Verweisen an geeigneten Stellen innerhalb des Beitrags, so dass der Besucher von dort schnell wieder an den Anfang springen kann.
Wenn Du in einem Beitrag einen Anker gesetzt hast, dann ändert sich das Pop-Up Fenster zum Einfügen von Verweisen (siehe oben) dahingehend, dass unter dem Feld „Titel“ ein weiteres Feld „Textmarken“ angezeigt wird, in dem die im Beitrag vorhandenen Anker zur Auswahl angeboten werden. Nach Auswahl des gewünschten Ankers wird automatisch der zugehörige Verweis in das Feld „URL“ eingetragen. Über Beiträge hinweg funktioniert das leider nicht, in diesem Fall musst Du wie oben angegeben den Verweis auf den Menü-Eintrag ermitteln und an sein Ende das Zeichen „#“ gefolgt vom Namen des Ankers in diesem Beitrag anhängen.
7: Mit diesem Knopf kannst Du ein Bild einfügen, da Du dazu allerdings den Speicherort des Bildes innerhalb unserer Website genau wissen musst, ist das etwas mühsam. Deutlich einfacher geht das mit dem Knopf „Bild“, den ich weiter unten beschreibe. Ein bereits eingefügtes Bild kannst Du durchaus über den Knopf nachbearbeiten, dazu markierst Du das Bild mit der Maus oder der Tastatur und klickst dann auf den Knopf. Es öffnet sich ein Pop-Up Fenster, in dem auf dem Tab „Allgemein“ die Adresse des Bildes, ein Feld für die Beschreibung des Bildes sowie Angaben zur Größe des Bildes angezeigt werden. Wenn Du das Bild bei der Anzeige skalieren (im Allgemeinen verkleinern) willst, dann solltest Du entweder die gewünschte Breite (erstes Feld) oder die gewünschte Höhe (2. Feld) eintragen und bei „Seitenverhältnis beibehalten“ einen Haken setzen.
Auf dem Tab „Erweitert“ kannst Du noch Angaben zum horizontalen und/oder vertikalen Abstand des Bildes zum umgebenden Text machen, einen Rahmen um das Bild zeichnen lassen und (für Experten) Angaben zur Art der Darstellung machen (im Feld „Stil“).
Es ist nicht möglich, über das Feld „Stil“ Angaben zum horizontalen und/oder vertikalen Abstand des Bildes zum umgebenden Text direkt einzugeben, entsprechende Angaben werden nach dem Klick auf „OK“ kommentarlos gelöscht. Auch das Ändern bereits vorhandener Werte (diese werden dann eingetragen, wenn in die Felder „Vertikaler Abstand“ bzw. „Horizontaler Abstand“ ein Wert eingetragen wird) ist wirkungslos, damit ist es auch nicht möglich, nur einen Abstand zu einer Seite (nur links oder rechts bzw. nur oben oder unten) einzugeben.
Die einzige Chance, dies zu erreichen, besteht über das Ändern des Quelltextes des Beitrags. Dabei ist aber zu beachten, dass diese Änderungen beim Bearbeiten des Bildes über den Button im Allgemeinen wieder verloren gehen.
Analoges gilt übrigens auch für das Feld „Rahmen“. Wenn Du in diesem Feld eine Zahl einträgst, dann wird ein Rahmen entsprechender Dicke um das Bild gezeichnet. Der dafür notwendige Stil wird ebenfalls in das Feld „Stil“ eingetragen, das Ändern des Eintrags im Feld „Stil“ oder das Einfügen eines entsprechenden Eintrags in dieses Feld werden nach dem Klick auf „OK“ kommentarlos ignoriert.
8: Mit diesem Knopf kannst Du den HTML-Quellcode des Beitrags bearbeiten. Außer für wenige Sonderfälle sollte das jedoch nicht notwendig sein. Bitte beachte, dass es auf diesem Weg nicht möglich ist, beliebigen HTML-Code in einen Beitrag einzufügen. Unzulässiger HTML-Code wird beim Speichern des HTML-Quellcodes automatisch entfernt, das gilt z.B. für eingefügtes JavaScript.
9: Mit diesem Knopf kannst Du die Textfarbe ändern. Da die Standard-Textfarbe in unserem Template festgelegt ist, solltest Du von dieser Möglichkeit nur in Sonderfällen Gebrauch machen.
A: Mit diesem Knopf kannst Du die Hintergrundfarbe ändern. Da die Standard-Hintergrundfarbe in unserem Template festgelegt ist, solltest Du von dieser Möglichkeit nur in Sonderfällen Gebrauch machen.
B: Mit diesem Knopf kannst Du zwischen dem eingebetteten Bearbeitungsmodus und dem Vollbildschirm-Modus hin- und herschalten. Im eingebetteten Modus ist der Eingabebereich kleiner, auch wenn man ihn in der Höhe verändern kann, dafür kannst Du jederzeit den aktuellen Stand des Beitrags speichern. Im Vollbildschirm-Modus siehst Du deutlich mehr vom Inhalt Deines Beitrags, dafür musst Du diesen Modus jedesmal verlassen, wenn Du den aktuellen Stand des Beitrags sichern willst.
Ich empfehle Dir, zur Bearbeitung umfangreicher Beiträge wegen der Übersicht immer im Vollbildschirm-Modus zu arbeiten und gelegentlich zum Speichern des aktuellen Zwischenstandes in den eingebetteten Modus zurück zu schalten.

In der dritten Gruppe von Knöpfen befinden sich 5 Abschnitte:
1: Hinter diesem Knopf findest Du alle Funktionen zum Erstellen und Bearbeiten von Tabellen.
Details zum Erstellen und Bearbeiten von Tabellen findest Du im Beitrag „Tabellen„.
2: Mit diesem Knopf kannst Du den markierten Text tiefstellen.
3: Mit diesem Knopf kannst Du den markierten Text hochstellen.
4: Wenn Du ein Zeichen benötigst, das Du nicht über die Tastatur eingeben kannst, dann geht das über den Knopf „Sonderzeichen einfügen„.
5: Wenn Du eine horizontale Linie einfügen willst, dann geht das über diesen Knopf.

In der vierten Gruppe von Knöpfen befinden sich 9 Abschnitte:
1: Mit diesem Knopf kannst Du den markierten Text ausschneiden.
2: Mit diesem Knopf kannst Du den markierten Text kopieren.
3: Mit diesem Knopf kannst Du den aktuellen Inhalt des Zwischenspeichers an der aktuellen Stelle des Beitrags einfügen. Im Browser Firefox scheint das nicht zu funktionieren, dort wird stattdessen eine Info-Box angezeigt, die Dir als Alternative die Tastenkombination Strg-V empfiehlt.
Wenn Du den aktuellen Inhalt des Zwischenspeichers in einen Beitrag einfügst, dann wird dieser Inhalt standardmäßig mit allen Attributen, Schriftart-Einstellungen usw. übernommen, sofern der Inhalt des Zwischenspeichers entsprechende Informationen enthält (das ist etwa dann der Fall, wenn Du aus einem MS Word Dokument Inhalt über den Zwischenspeicher in einen Beitrag übernehmen willst). Da die Übernahme dieser Informationen normalerweise nicht zum sonstigen Aussehen unserer Beiträge passt, dürfen sie nicht mit übernommen werden. Dies kannst Du mit dem nachfolgend beschriebenen Knopf (4) verhindern.
4: Mit diesem Knopf schaltest Du für das Einfügen des aktuellen Inhalts des Zwischenspeichers auf das Einfügen als Text um. Wenn Du den Knopf zum ersten Mal anklickst, erhältst Du die Meldung, dass ab diesem Moment beim Einfügen aus dem Zwischenspeicher nur noch der Text übernommen wird. Der Knopf wird ab diesem Moment auch grau hinterlegt dargestellt. Durch nochmaliges Anklicken dieses Knopfes schaltest Du diese Funktion wieder ab, d.h. bei danach aus dem Zwischenspeicher eingefügten Inhalten werden Attribute usw. wieder mit übernommen.
5: Mit diesem Knopf entfernst Du in dem zuvor markierten Text alle Formatierungen, also z.B. Attribute. Das macht z.B. Sinn, wenn ein Textbereich mit Attributen, Textfarben und Hintergrundfarben „verunstaltet“ ist und Du diesen Textbereich neu gestalten willst: einfach den Textbereich markieren und den Knopf drücken – und schon sind alle Formatierungen weg.
6: Mit diesem Knopf kannst Du Dir unsichtbare Zeichen anzeigen lassen (oder die Anzeige auch wieder abschalten).
7: Mit diesem Knopf kannst Du Dir Blöcke anzeigen lassen (oder die Anzeige der Blöcke wieder abschalten). Jeder Block wird dabei durch eine gestrichelte Linie eingerahmt.
8: Mit diesem Knopf kannst Du an der aktuellen Cursorposition ein geschütztes Leerzeichen einfügen. Das ist überall da interessant, wo Du mehrere Worte oder eine Zahl und eine Einheit mit Leerzeichen getrennt schreibst, aber sicher stellen willst, dass zwischen diesen Worten bzw. zwischen Zahl und Einheit kein Zeilenumbruch erfolgt.Damit eben kein Zeilenumbruch erfolgen kann, schreibst Du zwischen die Worte etc. kein Leerzeichen, sondern drückst auf diesen Knopf. Beispiele sind Angaben wie „18:00-20:00 Uhr“ oder „1.000 €“.
Wenn Du Dir den HTML-Quelltext anschaust, dann wirst Du an dieser Stelle kein Zeichen „ “ sehen, dennoch handelt es sich um ein geschütztes Leerzeichen. Wenn Du den bei 6 beschriebenen Knopf gedrückt hast, dann werden die geschützten Leerzeichen grau hinterlegt angezeigt.
9: Mit diesem Knopf kannst Du Dir eine Vorschau des aktuell im Editor bearbeiteten Textes anzeigen lassen. Da dabei nicht alle Stilvorlagen unseres Templates genutzt werden können, lässt es sich leider nicht vermeiden, dass die Vorschau nicht exakt so aussieht wie später der Beitrag im Frontend.

In der fünften Gruppe von Knöpfen findest Du die Knöpfe zum Einfügen von Phoca Gallery Bildern, von Bildern aus der Joomla Medienverwaltung sowie für die Trennung zwischen dem Teaser und dem Beitrag selbst. Im Einzelnen:
Phoca Gallery Bild: Dieser Knopf bietet Dir den Zugriff auf die Komponente Phoca Gallery, mit deren Hilfe Du einzelne Fotos und Foto-Galerien in einen Beitrag einbinden kannst. Details zum Umgang mit dieser Komponente findest Du im Artikel „Umgang mit Medien„.
Bild: Dieser Knopf bietet Dir den Zugriff auf die Medienverwaltung von Joomla, in der Du u.a. Bilder verwalten kannst. Details zum Umgang mit der Medienverwaltung von Joomla findest Du im Artikel „Umgang mit Medien„.
Weiterlesen: Mit Hilfe dieses Knopfs definierst Du die Trennung zwischen der Zusammenfassung eines Beitrags (Teaser) und dem Beitrag selbst. Die Zusammenfassung wird bei Hauptbeiträgen auf der Startseite angezeigt, außerdem bei Beiträgen, die Du über den Menü-Typ „Kategorie-Blog“ anzeigen lässt. Da dieser Knopf nur bei Beiträgen Sinn macht, wird er beim Bearbeiten von Kategorien nicht dargestellt.
Unterhalb des Textfensters gibt es noch den Knopf „Editor an/aus“. Mit Hilfe dieses Knopfs kannst Du ähnlich wie mit dem Knopf „HTML-Quelltext“ (siehe oben) zwischen der WISYWIG-Darstellung im Editor TinyMCE und der Darstellung als HTML-Quelltext hin- und herschalten. Bitte beachte, dass es auf diesem Weg nicht möglich ist, beliebigen HTML-Code in einen Beitrag einzufügen. Unzulässiger HTML-Code wird beim Speichern des HTML-Quellcodes automatisch entfernt, das gilt z.B. für eingefügtes JavaScript.