Der Joomla eigene Editor – Tiny MCE

Bevor wir jetzt loslegen können und unsere ersten Beiträge erstellen können, sollten wir uns ein wenig mit unserem Werkzeug dem Tiny MCE beschäftigen und diesen an unsere Bedürfnisse anpassen. Ein Handwerker der sein Werkzeug kennt und damit umgehen kann ist viel produktiver als jemand der der zwar das beste Werkzeug an der Hand hat aber damit nicht weiß umzugehen.

Wo finden wir die Konfiguration des TinyMCE?

Wir loggen uns in unser Joomla Kontrollzentrum ein und navigieren über
Erweiterungen / Plugins
zu den selbigen. Hier werden uns sämtliche Plugins die momentan in Joomla installiert sind angezeigt, egal ob diese aktiviert oder deaktiviert sind. Da sich diese Aufzählung über mehrere Seiten erstreckt, ist es sinnvoll die oben angebrachte Suchfunktion zu benutzen. Wir suchen nach dem Eintrag „Editor-TinyMCE“, für die Suche reicht jedoch der Suchbegriff „tinymce

Auflistung aller auf Joomla installierten Plugins

In den Suchergebnissen wird jetzt nur noch ein Treffer angezeigt, und auf diesen klicken wir mit der linken Maustaste.

das TinyMCE Plugin über die Suche gefunden

Den TinyMC-Editor konfigurieren

Jetzt öffnet sich die Konfigurationsebene des Plugin und wir bekommen die Info, dass TinyMCE ein plattformunabhängiger, web-basierter JavaScript HTML-WYSIWYG-Editor ist. Die Buchstaben WYSIWYG bedeuten ausgeschrieben „what you see is what you get“ und übersetzt heißt dies „Was Du siehst ist was Du bekommst“. Das bedeutet, dass TinyMCE so funktioniert wie Beispielsweise ein Textverarbeitungsprogramm auf unserem Computer, dort sehen wir ebenfalls sofort wenn wir eine Textpassage formatieren, wie diese später auf unserem Ausdruck aussehen wird. Genauso verhält es sich auch mit einem WYSIWYG-Editor. Was natürlich die Verwendung erheblich vereinfacht, zumindest für Anfänger und Einsteiger.

TinyMCE Reiter und Willkommensnachricht

Joomla bietet auch noch einen anderen Editor an, der nennt sich „CodeMirror“ und in diesem Editor muss man den Text mit HTML-Tags (gesprochen „Tägs“ aus dem englischen) auszeichnen um die gewünschte Formatierung zu erhalten. Hier 2 Bilder der beiden Editoren die den Unterschied schnell veranschaulichen sollten.

Vergleich zum CodeMirror Editor der kein WYSIWYG Editor ist

Zum Vergleich den TinyMCE mal schnell geöffnet

Widmen wir uns wieder der Konfiguration unseres TinyMCE, gleich unter der Beschreibung finden wir einen Bereich der uns sämtliche zur Verfügung stehenden Schaltflächen aufzeigt die der Editor mitbringt. Aus diesem Portfolio können wir uns bedienen wenn wir uns unsere eigenen Menüleisten zusammenstellen, wir werden wahrscheinlich nicht sämtliche Funktionen benötigen die uns der Editor bietet. Damit wir später effektiv arbeiten können werden wir uns nur die anzeigen lassen die für uns von Bedeutung sind.

Maximal Mögliche Werkzeugleiste des TinyMCE

Die Voreinstellungen anpassen

Im nächsten Abschnitt finden wir bereits vordefinierte Voreinstellungen die wir auf unsere Bedürfnisse weiter anpassen können.

"Voreinstellung 2" des TinyMCE

Sehen wir uns die „Voreinstellung 2“ mal genauer an! Was uns sofort auffallen wird, ist, dass die zur Verfügung stehenden Schaltflächen recht übersichtlich sind. Es werden nur 8 Schaltflächen angezeigt, gleich darunter finden wir ein Feld mit der Beschriftung „Voreinstellung zuweisen“ links daneben sehen wir welcher Benutzergruppe diese Einstellungen zugewiesen wurden. Momentan ist nur eine Benutzergruppe dieser Einstellung hinzugefügt, nämlich die Benutzergruppe „Public“. Diese Benutzergruppe beschreibt die Besucher unserer Webseite die sich noch nicht registriert haben oder noch nicht mit ihrem Benutzernamen und Passwort einloggten. Diese Benutzergruppe hat die geringsten Rechte auf unserer Seite, daher stehen dieser Gruppe, wenn überhaupt, nur sehr spärliche Möglichkeiten für die Textformatierung zur Verfügung. Hier sei auch noch angemerkt, dass man einer Voreinstellung auch mehrere Benutzergruppen zuweisen kann, das werden wir aber gleich noch sehen. 

Schalten wir auf die „Voreinstellung 1“ und sehen uns diese mal genauer an.

"Voreinstellung 1" des TinyMCE

Es fällt uns sofort auf, dass die Benutzergruppen die dieser Voreinstellung zugewiesen wurden, wesentlich bessere Möglichkeiten für die Textformatierung zur Seite gestellt bekommen als die der „Voreinstellung 2“. Die Benutzergruppen die dieser Voreinstellung zugewiesen wurden sind hier die „Manager“ und die „Registered“. Da wir jedoch auf unserer Seite als „Super User“ unterwegs sind, ist auch diese Voreinstellung nicht die richtige für uns. Wir schalten also weiter zur „Voreinstellung 0“.

"Voreinstellung 0" des TinyMCE

Diese Voreinstellung beinhaltet alles was und TinyMCE bieten kann. Dieser Voreinstellung wurden die Benutzergruppen „Administrator“, „Editor“ und „Super User“ zugewiesen, das bedeutet, dass die Einstellungen die wir hier vornehmen dann tatsächlich auch uns betreffen. Jetzt können wir Anfangen unsere Menüs und Schaltflächen so zu ordnen wie wir es bevorzugen. Ich persönlich habe mich bei meinem Aufbau daran orientiert wie die Schaltflächen in dem Textverarbeitungsprogramm angeordnet sind in dem ich normalerweise meine Texte verfasse. Somit erspare ich mir das ständige Suchen in den Schaltflächen, da jedes circa an der Stelle liegt an der ich es gewohnt bin. Bevor Du jetzt loslegst und per Drag & Drop Deine Menüs und Schaltflächen an Deine Bedürfnisse anpasst, möchte ich noch schnell Deine Aufmerksamkeit auf eine kleine Leiste lenken, die sich über Deiner Menü- bzw. Werkzeugleiste befindet

Schnellkonfiguration für Voreinstellungen des TinyMCE

Mit dieser Leiste kannst Du auf die Schnelle Deine Menü- und Werkzeugleiste „Leeren“ oder eine der drei anderen Einstellungen zur weiteren Anpassung übernehmen. Probiere es aus, Du wirst sehen, dass es recht intuitiv zu bedienen ist. Solltest Du jetzt etwas vergessen was Du später beim Bearbeiten Deiner Texte benötigst, ist das gar kein Problem, diese Einstellungen hier kannst Du jederzeit an Deine Bedürfnisse anpassen.

Werkzeugleiste des TinyMCE via Drag & Drop anpassen

Allgemeine Einstellungen des TinyMCE

Im folgenden Bild markiere ich die Einstellungen auf die ich gleich noch eingehen werde, keine Sorge es sind nur die Wichtigsten, eine komplette Beschreibung des TinyMCE findest Du unter: https://www.tinymce.com/docs/

Allgemeine Einstellungen des Editors

Mobilmodus – Dieser Modus wird auf mobilen Geräten aktiviert, damit man die einzelnen Schaltflächen besser bedienen kann. Wer diesen Modus nicht benötigt kann ihn auch deaktivieren.

Drag & Drop für Bilder – Hier wird die Drag & Drop Funktion für Bilder in Beiträgen aktiviert oder deaktiviert, wer dies nicht benötigt kann auch hier auf „Aus“ stellen.

Bilderverzeichnis – Wenn die Drag & Drop Funktion in Beiträgen aktiviert ist, dann muss man hier das Bilderverzeichnis eintragen, damit TinyMCE weiß wohin der die Bilder hochladen soll. Ich persönlich benutze immer verschiedene Verzeichnisse damit ich auch bei vielen Bildern die Übersicht behalte, daher ist diese Funktion bei mir immer deaktiviert.

Entity-Kodierung – diese Option bitte nicht verstellen und auf „Raw“ belassen, es kann sonst zu Fehlern in der Suche kommen.

Autom. Sprachauswahl – wenn eingeschaltet übernimmt der Editor automatisch die für den Benutzer eingestellte Sprache, sollte die Sprache nicht installiert sein, wird auf Englisch zurückgegriffen.

Textrichtung – Wir schreiben von links nach rechts und daher wählen wir auch diese Option.

URLs – wie sollen URLs eingefügt werden? Wenn in der internen Verlinkung absolute URLs ausgeführt werden, so wird die komplette URL aufgeführt:

absolute URL:

Bei relativen URLs wird hingegen lediglich der Pfad zum verlinkten Dokument hinterlegt:

relative URL:

Beide Formen lassen sich gleichermaßen zur internen Verlinkung nutzen. Vor und Nachteile besprechen wir an einer anderen Stelle.

Neue Zeilen – ich empfehle jedem diese Einstellung auf <p> zu belassen, somit hat man beim Drücken der Entertaste sofort einen neuen Absatz.

iFrame in TinyMCE erlauben

Verbotene Elemente – Der folgenden Einstellung ist ein wenig Aufmerksamkeit zu schenken, da ich immer wieder Nachrichten bekomme, dass jemand zum Beispiel keine YouTube Videos in seine Beiträge einbetten kann. Diese Einstellung ist der Grund dafür. Der YouTube Einbettungscode verwendet „iFrame“ und diese sind aus Sicherheitsgründen, standardmäßig deaktiviert. Wenn Du also iFrame auf Deiner Seite verwenden möchtest, dann lösche diesen aus den verbotenen Elementen einfach raus. Falls Du diese später entfernen möchtest, dann achte darauf, dass Du in der richtigen Voreinstellung bist, damit Du nicht versehentlich der falschen Benutzergruppe zu viele Rechte einräumst!

Der Reiter „Erweitert“ und seine Funktion

Ganz oben sehen wir, dass wir uns momentan im Reiter „Plugin“ befinden, rechts daneben sehen wir noch den Reiter „Erweitert“ den ich Dir natürlich nicht vorenthalten möchte.

Der Reiter "Erweitert" in diesem Plugin

Wir klicken auf diesen Reiter und öffnen so die Erweiterten Einstellungen

Mehrere Voreinstellungen im Editor anlegen

Hier muss ich auf nichts weiter eingehen als auf die Anzahl der Voreinstellungen die man im Reiter „Plugin“ konfigurieren und einer Benutzergruppe zuweisen kann.

Anzahl der Voreinstellungen – Hier kannst Du festlegen, wie viele Voreinstellungen im Reiter „Plugin“ definiert werden können. Sollten Dir drei nicht ausreichen, dann hast Du hier die Möglichkeit die Anzahl zu erhöhen. Diese werden jedoch erst nach einem Klick auf „Speichern“ im Reiter „Plugin“ sichtbar.

 

 

Jetzt bist Du gefragt!

Hast Du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieses Tutorial nicht mehr aktuell? Dann freue ich mich auf Deinen Kommentar.

Besten Dank auch dafür, falls Du meinen Beitrag weiterempfiehlst, ich bin Dir für jede Unterstützung dankbar!

1000 Zeichen übrig


   

Newsletter Anmeldung  

Melde Dich für meinen Newsletter an um keine wichtigen Infos aus der Welt des Webdesign zu verpassen!

 
   

Login Form  

   
Um meine Webseite für Dich optimal zu gestalten und fortlaufend verbessern zu können, verwende ich Cookies. Durch die weitere Nutzung der Webseite stimmst Du der Verwendung von Cookies zu. Es werden nur folgende anonymisierte Daten von Google Analytics ausgewertet: Dauer der Sitzung, Anzahl der Seitenbesucher, Welche Seiten wurden besucht, Absprungrate. Damit kann ich feststellen, welche Inhalte für meine Besucher interessant sind und welche Themen nicht. Diese Information hilft mir dabei in Zukunft meine Webseite für meine Besucher besser zu gestalten, somit profitieren alle von dieser Analyse.
Der Verwendung von Google Analytics-Cookies kann jederzeit in meiner Datenschutzerklärung widersprochen werden.
Datenschutzerklärung Ich habe das verstanden!