Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

TYPO3 CMS 6.2 Grundkurs

Editor effektiv einsetzen

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Editor ist das Herzstück zur Text- und Inhaltsbearbeitung. Lernen Sie die wichtigsten Funktionen kennen, um mit dem Editor effektiv zu arbeiten.

Transkript

Für das Arbeiten mit Texten bietet TYPO3 schon standardmäßig einen sehr komfortablen Editor. Um sich das näher anzusehen, gehen Sie am besten in ein normales Textinhaltselement und bearbeiten es. Der Editor ist nun im unteren Bereich zu sehen. Sie können ihn übrigens auch deaktivieren. Dann haben Sie einfach nur ein normales Textfeld. Aber in unserem Fall wollen wir uns natürlich um die Formatiermöglichkeiten im Editor kümmern. Das heißt, wir lassen ihn natürlich aktiviert. Damit die Bearbeitung etwas komfortabler ist, können Sie hier in den Vollbildmodus schalten. Das heißt, der Rich-Text-Editor nimmt nun die komplette Seite ein. Nun sehen wir uns mal die Möglichkeiten an. Grundsätzlich gibt es die Möglichkeit, für jede Art von Elementen eigene Stile zu definieren. Standardmäßig sind hier ein paar Stile schon hinterlegt. Die Formatierung bleibt dann Ihrem zentralen CSS überlassen. Man unterscheidet hier in Blockstile, die für die Blockelemente in HTML zum Einsatz kommen. Hier zum Beispiel dieses erste Element, sieht man hier unten im Pfad, ist ein Nonep, also ein Absatz. Wenn ich jetzt hier zum Beispiel am Ende Enter drücke, dann bin ich in einem neuen Absatz und kann diesem nun einen Blockstil zuweisen. Die zweite Art von Stilen ist der Textstil. Er kommt zum Einsatz, wenn ich hier einen Text markiert habe. Nun kann ich einen Textstil entsprechend wählen. Die Standardstile hier müssen allerdings auch in Ihrem CSS hinterlegt sein. Ansonsten werden sie erstmal nicht funktionieren, das heißt, in der Ausgabe nicht sichtbar sein. Wir sehen uns das mal an. Ich markiere diesen Stil mal als Detail. Man sieht das nun hier im Editor hervorgehoben. Ich öffne nun die Seite. Und hier sieht man keine Hervorhebung. Was ist aber im Hintergrund passiert? Wir sehen uns im Firebug mal den HTML-Code an. Hier wurde ein span-Element mit der Klasse detail eingefügt. Wenn Sie nun in Ihrem CSS die Klasse detail formatieren würden, würden Sie diese Hervorhebung hier sehen können. Nun weiter in unseren Auszeichnungen. Ich wechsle wieder zurück. Sie haben schon gesehen: Wenn Sie innerhalb einer Seite oder innerhalb eines Textes Elemente auswählen, können Sie diese separat formatieren. Hier gibt es noch die klassischen Auszeichnungen, beispielsweise Fett, oder auch Kursiv, Tiefgestellt und Hochgestellt für Zahlen beispielsweise. Auch das können wir mal ausprobieren. Die Auswirkungen sehen Sie dann sofort im Browser. Hier haben wir die Fett-Auszeichnung, hier Kursiv4, und hier Hochgestellt. Realisiert werden diese in diesem Fall mit entsprechenden HTML-Elementen. Beispielsweise b für Bold und i für Italic. Bei unserem Element hier unten mit sup für Hochgestellt. Zurück zum Editor. Hier haben Sie nun noch die Möglichkeit, das Blockformat zu ändern. Beispielsweise ist es möglich, Überschriften einzufügen, oder auch andere HTML5-relevante Blockelemente. Und insgesamt lässt sich hier eine wirklich komplette Seite anlegen. Ich gehe hier mal mit Enter noch in einen neuen Absatz. Übrigens, einen Zeilenumbruch erzeugen Sie mit Shift+Enter. Das wäre dann br-Tag entsprechend. Und füge hier meine Aufzählung hinein. Es gibt nummerierte Aufzählungen, ordered lists in HTML. Und es gibt entsprechend unnummerierte, unordered lists. Mit Enter und dann dem Klick hier oben auf Nummerierung komme ich wieder in einen neuen Abschnitt. Hier kann ich dann wiederum ein Blockelement wählen, zum Beispiel eine Zwischenüberschrift. So entsteht langsam aber sicher eine komplette Inhaltsseite. Das komplexeste Element, das Sie hier einfügen können, ist eine Tabelle. Ich gebe ihr mal einen Titel. Wir wählen mal den Standard, 2 Zeilen, 4 Spalten. Und bestätigen. Nun entsteht hier eine Tabelle. Man sieht, es sind die einzelnen Zellen vorhanden. Und man kann nun hier zum Beispiel eine Spaltenüberschrift wählen. Und könnte nun auch innerhalb der Tabellenzelle beispielsweise Formatierungen wie Fett oder Kursiv einfügen. Man ist da also recht flexibel. Hier oben sind eine Reihe an weiteren Icons entsprechend freigeschaltet, mit denen man nun Zeilen und Spalten einfügen kann an verschiedenen Stellen und mit denen man die Tabelleneigenschaften entsprechend bearbeiten kann. Wen der Hintergrund des Ganzen interessiert, wer also wissen möchte, welches HTML am Ende hier rauskommt, kann in den Textmodus umschalten und sieht dann entsprechend die HTML-Elemente und kann hier an dieser Stelle auch eingreifen. Mit diesem Pinselsymbol lassen sich Formatierungen wieder entfernen, beispielsweise im gesamten Text oder im ausgewählten Text. Man kann hier auch nur speziell unangenehme Formatierungen, die zum Beispiel aus Word kommen, entfernen. Man kann aber auch die komplette HTML-Formatierung entfernen. In unserem Fall habe ich hier zum Beispiel den Fett-Druck vernichtet. Für den Text selbst gibt es wiederum auch noch ganz hilfreiche Funktionen. Hier über dieses Symbol kann ich Sonderzeichen einfügen, verschiedenste Arten. Und über dieses Symbol kann ich, wenn ich einen Text ausgewählt habe, einen Link einfügen auf beispielsweise eine externe oder interne Seite, hier zum Beispiel mal auf eine interne Seite. Dazu klicke ich mich durch den Seitenbaum und klicke dann zum Beispiel diese Seite an. Und könnte nun sogar noch einzelne Inhaltselemente verlinken. Gehe aber hier mal auf die komplette Seite. Und Sie sehen, der Link taucht auf. Wenn ich das Ganze mal in der Voransicht öffne, ist nun hier dieser Punkt aus der Aufzählung verlinkt. In diesem Fall hat es noch nicht geklappt, weil die entsprechende Seite noch nicht in der Sprache vorhanden ist. Da können wir jederzeit auch den Link wieder ändern. Ich klicke auf den Link und Sie sehen, der Link zeigt, worauf er aktuell ist. Und ich kann ihn jetzt zum Beispiel umlegen. Teste das Ganze nochmal und lande nun hier auf der Homepage.

TYPO3 CMS 6.2 Grundkurs

Erfahren Sie alles Wichtige für den Einstieg in das Content-Management-System TYPO3 CMS sowie zu Themen wie Mehrsprachigkeit und Multidomainfähigkeit bis hin zur News-Verwaltung.

Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!