Erweiterung WYSIWYG Editor TinyMCE

Der WYSIWYG Editor ist der zentrale und wichtigste Bestandteil eines jeden Content Management Systems, so auch von CMS Made Simple. In ihm werden Texte für die Webseite eingegeben, editiert und formatiert. Links können hier eingefügt und Bilder platziert werden. Zur Bedienung des WYSIWYG Editors sind keinerlei HTML Kenntnisse notwendig. Die Bedienung erfolgt einfach und intuitiv. Die Darstellung im Arbeitsbereich entspricht der späteren Darstellung auf der Webseite.

Mit CMS Made Simple eine Webseite zu erstellen ist recht einfach. Letztendlich steht und fällt sie jedoch mit dem Inhalt. Da Du Deine Webseite höchstwahrscheinlich pflegen, d.h. regelmäßig Inhalte ergänzen und bearbeiten wirst, ist der WYSIWYG Editor das Element von CMS Made Simple, das Du am häufigsten nutzt. Nicht zuletzt aus diesem Grund ist es wichtig zu wissen, wie der WYSIWYG Editor Dir bei Deiner Arbeit helfen kann und wie Du ihn effizient einsetzen kannst.

Der von CMS Made Simple benutzte WYSIWYG Editor ist natürlich nicht der einzige, den es gibt, mehrere Anbieter stellen sie zur Verfügung. Der hier verwendete nennt sich TinyMCE und ist vollständig in CMS Made Simple integriert. Falls Du Dein Content Management System noch nicht installiert hast, kannst Du Dir eine Demo des WYSIWYG Editors auf der offiziellen Webseite anschauen. Falls Du CMS Made Simple bereits installiert hast, ist er Dir sicherlich bereits aufgefallen.

Öffne im Admin Panel Inhalte --> Seiten und öffne irgendeine Seite. Das Feld „Content:“ nutzt den WYSIWYG Editor.

WYSIWYG Editor Tiny MCE bei CMS Made Simple- Jens Hauschildt

Die Bedienung des WYSIWYG Editors TinyMCE ist einfach. Seine Bedienleiste erinnert an die bekannter Textbearbeitungsprogramme. Sollten Dir diese Einstellungen nicht ausreichen, so können weitere Symbolleisten aktiviert werden.

Einstellungen im WYSIWYG Editor

Für manche Anwendungen erscheint einem der WYSIWYG Editor als zu klein. Um die Einstellungen anzupassen, gehe im Admin Panel von CMS Made Simple in Erweiterungen --> TinyMCE. Hier siehst Du die Einstellungen zu „Breite des Editor-Feldes:“. Im Standard sind hier Werte vorgegeben, probiere aber die Anpassung an Deine individuellen Wünsche aus. Gebe eine Breite und Höhe vor, so dass mehr Platz für die Inhalte besteht.

Bei CMS Made Simple WYSIWYG Editor Tiny MCE einstellen - Jens Hauschildt

Klicke nach der Änderung aus „Einstellungen speichern“. Unten auf der Seite ist ein Testfeld an dem Du die derzeitigen Einstellungen erkennst, so z.B. aktuelle Höhe und Breite des WYSIWYG Editors TinyMCE. Die hier gemachten Einstellungen wirken sich auf alle Seiten aus. Wenn Du beim Einstellen alle zerschossen hast, kannst Du durch Klick auf „Auf die programmseitigen Vorgeben zurücksetzen“ den ursprünglichen Standard von CMS Made Simple wieder herstellen und weiter Deine Webseiten erstellen.

Profile im TinyMCE

Durch einen Wechsel in den Reiter „Profile“ erhältst Du Einblick in weitere Anpassungen des WYSIWYG Editor. Als Administrator Deiner Webseite hast Du die Möglichkeit das „Erweiterte Profileinstellungen für das Backend“ anzupassen. Aktiviere die Checkbox „Tabellen-Operationen erlauben:“, um Die Symbolleiste für Tabellen in den WYSIWYG Editor einzufügen. Nach speichern des Profils siehst Du im WYSIWYG Editor eine dritte Symbolleiste für die Erstellung und das Editieren von Tabellen.

Suche die Zeile „Optionen zur Dateiverwaltung anzeigen:“ und aktiviere die Checkbox und speichere Dein Profil für Deine Webseite in CMS Made Simple. Nun kannst Du Bilder im WYSIWYG Editor TinyMCE nicht nur einfügen, sondern auch gleichzeitig ohne den Umweg über den Image Manager hochladen. Praktisch.

Bilder hochladen mit dem WYSIWYG Editor Tiny MCE in CMS Made Simple - Jens Hauschildt

Um dies zu erreichen klicke auf das „Bild einfügen/ersetzen“ im WYSIWYG Editor. Klicke in dem sich neu geöffneten Fenster auf das Symbol rechts neben der Adressleiste und schon wird das Bilder hochladen angeboten, was normalerweise nicht funktioniert.

Erweiterungen

Hinter dem Reiter „Erweiterungen“ verstecken sich mehrere Erweiterungen, die dem WYSIWYG Editor zugefügt werden können. Auch hier gilt, dass Fehleinstellungen, aus denen Du alleine nicht mehr herauskommst, durch einen Klick auf den Button „Auf die programmseitigen Vorgeben zurücksetzen“ den ursprünglichen Zustand von CMS Made Simple wieder herstellen. Also keine Angst – probiere es aus. Ich empfehle Dir folgende Einstellungen zu den Standardvorgaben zusätzlich vorzunehmen:

  • Print – erlaubt den Druck von Text direkt aus dem WYSIWYG Editor
  • Full Screen – fügt eine Vollbildansicht im TinyMCE hinzu
  • Search and Replace – erlaubt eine Suchen/Ersetzen Funktion
Im WYSIWYG Editor in CMS Made Simple zusätzliche Tiny MCE Erweiterungen einstellen - Jens Hauschildt

Speicher nun die Erweiterungsauswahl.

Das Icon für die Bearbeitung in der Vollbildansicht findet sich rechts im WYSIWYG Editor in der zweiten Symbolleiste von oben. Es ist recht komfortabel in dieser Ansicht zu arbeiten, insbesondere, wenn die Texte lang sind oder Bilder eingepasst werden müssen. Die beiden anderen zugefügten Erweiterungen sind nicht im WYSIWYG Editor sichtbar. Warum nicht? Um dies zu klären gehen wir noch einmal einen Schritt in den Tab Profile zurück. Unter „Erweiterte Profileinstellungen für das Backend“ siehst Du drei Werkzeugleisten. Diese Werkzeugleisten kontrollieren den Aufbau der Symbolleisten im WYSIWYG Editor TinyMCE. In jeder Werkzeugleiste sind die entsprechenden Befehle (Symbole) aufgelistet, und zwar in derselben Reihenfolge, wie Du sie im WYSIWYG Editor siehst.

EInstellungen an der Werkzeugleiste vom WYSIWYG Editor TinyMCE in CMS Made Simple vornehmen - Jens Hauschildt

Die dritte Werkzeugleiste ist noch leer. Um die neuen Symbole hinzuzufügen, schreibe entsprechenden Namen, die jeweils durch ein Komma getrennt sind, hinein: search,replace,print .

Die Werkzeugleiste 3 im WYSIWYG Editor TinyMCE von CMS Made Simple definieren - Jens Hauschildt

Speichere Dein Profil und schaue Dir das Ergebnis im WYSIWYG Editor an. Zufrieden? Mit Hilfe der Werkzeugleisten kannst Du das Aussehen des WYSIWYG Editors einfach anpassen. Verändere hierzu die Reihenfolge der einzelnen begriffe oder lösche die, die Du nicht benötigst. Und wie immer gilt dabei, dass ein zurücksetzen auf die Standardeinstellungen möglich ist. Webseiten erstellen kann doch so schön sein.

◄◄ Mit dem Image Manager Bilder verwalten || Sitemap erstellen - MenuManager ►►