Joomla Content Editor (JCE)

Der mit Joomla mitgelieferte Editor Tiny-MCE erfüllt im Wesentlichen die Anforderungen zum Veröffentlichen von Content. Alle grundlegenden Funktionen zu Erstellen von Artikeln, Upload und Einbau von Bildern lassen sich recht problemlos umsetzen.
An einigen Stellen stellt er sich aber als nicht allzu benutzerfreundlich dar. Immer dann wenn es um eigenes HTML und insbesondere CSS geht ist eine komfortablere Umgebung wünschenwert. Ich musste insbesondere dann händisch in den Quelltext eingreifen, wenn ich eigene CSS aus den Template-CSS-Dateien nutzen wollte. Parallel zu diesen Problemen während der Erstellung dieser Seite suchte ich nach einer Möglichkeit, Bilder "per Klick" vergrößerbar einzubauen.

Beide, scheinbar unabhängige Probleme habe ich dann mit dem » Joomla Content Editor (JCE) gelöst. Notwendig sind der JCE selbst und » JCE MediaBox.

Alle folgenden Beschreibungen und Screenshot beziehen sich auf eine Installation beider Teile!
Auf die Nutzung der JCE MediaBox gehe ich im nächsten Artikel kurz ein.

JCE - Allgemein

JCE (in Verbindung mit der JCE MediaBox)  bietet einige sinnvolle Erleichterungen beim Erstellen von Content  in Joomla:

• schnellen Zugriff auf CSS-Klassen (auch eigene CSS)
• komfortables Einbinden von Bildern
• saubere Bereinigen von HTML
• einfaches Verlinken von Inhalten

Quellen, Installation

Ich habe die » Downlaods der Originalseite und die » deutsche Sprachdatei von Webdesign Steuerwald genutzt und nach den üblichen Vorgaben problemlos installiert. Nicht vergessen: im Kontrollzenrum unter Site >> Konfiguration den Editor auswählen (sihe Bild)!Elementauswahl

Unter Komponenten steht Euch jetzt ein eigener Punkt "JCE-Editor" zur Verfügung.

Hinweis:

JCE verwendet offensichtlich (zumindest Teile) der Template-CSS für seine Darstellung. Das hatte bei mir im Editor schwarze Schrift auf schwarzem Hintergrund zur Folge.                >:-(
Im Kontrollzentrum von JCE unter dem Abschnitt "Formatierung und Anzeige" könnt Ihr das ändern (bei mir half "Editorstil zurücksetzen: JA").

JCE nutzen

Beim Erstellen/Editieren von beiträgen sollte jetzt JCE als Editor zur Verfügung stehen. Die Icons haben sich teilweise optisch verändert und neue Funktionaltäten gewonnen und neue Icon sind nutzbar. Beim überfahren der Icons mit der Maus wird ein Tooltipp mit der Funktionsbezeichnung eingeblendet. Für mich relevant sind die im Folgenden genannten Änderungen (Auswahl).

1. Stile

Hier stehen bei mir die Klassen aus den CSS-Dateien (auch eigene CSS) zur Verfügung und können damit direkt auf den Content angewendet werden.
Achtung: Im Gegensatz zu Textverarbeitungsprogrammen muss auch bei Absatzformatierungen vor der Stilauswahl der gesamte Absatz im Editor markiert sein!

2. Säubern

"Formatierung entfernen" und "Code bereinigen" sind zuverlässig nach "copy & paste" aus Textverarbeitungsprogrammen.

3. Quellcode anzeigen

Das Icon hat eine andere Optik. Der Quelltext wird jetzt strukturierter und mit farblicher Codehervorhebung angezeigt.

4. Link einfügen bearbeiten

Der Link-Manager ermöglicht eine komfortable Einbindung von Links in den Content.
Externe Links per "copy & paste" in die Zeile URL eintragen und im unteren Bereich des Link-Managers die Attribute (z.B. Zielfenster) festlegen.
Interne Links lassen sich gut im mittleren Bereich des Managers anwählen.

5. Bild einfügen/bearbeiten

Der Button [Bild] unter dem Editor-Fenster nutze ich kaum noch. Der Bilder-Manger ist ist ein deutlich komfortableres Werkzeug zum Einbinden von Bildern in die Site. 

Im Reiter "Bild" kann man bequem im Datei-Browser das einzubindende Bild auswählen und zusätzliche Attribute einstellen. Im rechten Bereich des Datei-Browsers sind Schaltflächen für Datei-Operationen (Ordner erstellen, Hochladen, Löschen, Umbenennen, Kopieren, ...) vorhanden.
Im Reiter "Erweitert" ist wieder die Zuweisung zu vorhandenen CSS-Klassen möglich.

Der JCE-Datei-Browser steht übrigens im Joomla-Kontrollzentrum im Backend auch direkt zur Verfügung.

JCE: Bilder-Manager: Reiter Bild

JCE: Bilder-Manager: Reiter Erweitert

6. Weiterlesen/Seitenwechsel einfügen

Die beiden Schaltflächen bieten die selbe Funktionalität wie die Buttons unter dem Editorfenster.