Jehu's kleine Welt

Die technische Einrichtung unserer WYSIWYG-Lösung ist fertiggestellt und die Fancybox funktioniert. Nun müssen die Redakteure noch wissen, wie sie in Zukunft mit den hinzugekommenen Features umgehen.

Darum geht es in diesem Teil der Serie.

Diese Serie gliedert sich in vier Teile:

• Teil 1: Module auswählen, herunterladen und entpacken
• Teil 2: Module aktivieren und konfigurieren
• Teil 3: Fancybox einbinden
• Teil 4: Anleitung für Redakteure

Teil 4: Anleitung für Redakteure

Soll ein Bild in einem Text hinzugefügt werden, stelle den Cursor an die ensprechende Stelle im Text.

Klicke nun im Editor auf das Symbol "Bild einfügen" (siehe Bild).

Es erscheint nun ein Popup-Fenster. Am Ende des Eingabefeldes "Adresse" befindet sich eine Schaltfläche für Bildupload/-auswahl (siehe Bild).

Klicke auf die Schaltfläche, es erscheint ein weiteres Fenster (IMCE, siehe Bild). Um ein neues Bild hoch zu laden, klicke auf die Schaltfläche "Upload" [1]. Es wird ein Upload-Feld eingeblendet, sowie einige Checkboxen mit den möglichen Bildgrößen.

Mit dem Button "Durchsuchen..." [2] kann ein Bild von der Festplatte zum Upload ausgewählt werden. Wenn Thumbnails (also Vorschaubilder) generiert werden sollen, markiere die Checkboxen für die gewünschten Bildgrößen. [3]

Um schließlich das gewählte Bild hoch zu laden und die Thumbnails generieren zu  lassen, klicke auf die Schaltfläche "Upload". [4]

Nachdem der Upload abgeschlossen ist, sind die Originalbilder und die erstellten Thumbnails in dem Hauptbereich des aktuellen Fensters auffindbar (siehe nächstes Bild). Klicke nun ein gewünschtes Vorschaubild an [1] und betätige anschließend die Schaltfläche "Send to tinymce".

Man gelangt nun zurück zu dem Popup mit den Bildeigenschaften (siehe nächstes Bild). Hier kann man einfach die Schaltfläche "Einfügen" betätigen.

Das gerade eingefügte Vorschaubild ist nun im Editor sichtbar. Damit die Klickvergrößerung funktionieren kann, muss jetzt auf ein großes Bild verlinkt werden.

Dazu wird das Bild im Editor angeklickt (siehe nächstes Bild). Das markierte Bild ist an den 8 Anfassern erkennbar, die dann sichtbar werden. [1]. Klicke nun die Schaltfläche "Link einfügen" [2].

Es öffnet sich nun ein Popup-Fenster, in dem alle Linkeinstellungen vorgenommen werden (siehe nächstes Bild). Auch hier haben wir wieder die Schaltfläche zur Bildberwaltung rechts neben dem Eingabefeld "Adresse".

Bei einem Klick darauf öffnet sich wieder die Bildverwaltung IMCE (siehe nächstes Bild).

Nun markiere das Bild für die Vergrößerungsansicht (also das Originalbild, oder ein größeres beim Upload generiertes Bild) [1]. Schließlich wird das Bild mit einem Klick auf die Schaltfläche "Send to tinymce" als Linkadresse übernommen [2].

Damit die Klickvergrößerung tatsächlich funktioniert, kann es sein, dass dem Link eine Spezielle CSS Klasse gegeben werden muss. Das geschiet im Tab "Erweitert" (siehe nächstes Bild). Im Feld "Klassen" wird die benötigte CSS-Klasse eingetragen (hier: "gross", kann abweichen).

Abschließend den Link durch Betätigen der Schaltfläche "Einfügen" fertigstellen.

Das war's. Nach dem Speichern des Textinhaltes siehst du das gerade eingefügte Bild. Ein Klick darauf bringt die Großansicht des Bildes zum Vorschein.

Ich hoffe, diese Anleitung war aufschlussreich. Sollten dir Fehler auffallen, oder solltest du Verbesserungsvorschläge haben, so hinterlasse bitte einen Kommentar.