Texteditor

Ursprünglicher Autor: Urs Gamper, Patrick Rufer, Daniel Schliebner

Artikelbezogene Texte

Um Texte zu erstellen und verwalten, klicken Sie in der linken Navigation auf "Texte". Nun erscheint ein grosses, weisses Textfeld. Darüber sehen Sie zahlreiche Schaltflächen. Das gesamte nennt sich "WYSIWYG-Editor". In diesem Editor können Sie Texte schreiben, diese formatieren, gestalten und vieles mehr.

Ebenso können Sie Artikel direkt über die Gruppen erfassen. Sie wählen sich als erstes bei den Gruppen in eine Gruppe/ein Verzeichnis ein.

Mehr zum Erstellen von Artikeln finden Sie in dem entsprechenden Dokumentationstext Artikelverwaltung.

Der Editor

Im weißen Feld des Editors können Sie Texte ganz normal schreiben. Mit den Schaltflächen darüber können Formatierungen vorgenommen, Bilder und Links eingefügt und einige andere Möglichkeiten, die das Internet bietet angewendet werden.

Beschreibung der Schaltflächen

In folgender Tabelle werden die einzelnen Schaltflächen genauer beschrieben:

	Bedeutung	Anwendung/Wirkung bei Klick
	Neues Dokument	Löscht den Inhalt aus dem Textfeld. Nicht gespeicherte Daten werden gelöscht.
	Drucken	Druckt den Inhalt des Textfelds.
	Fette Schrift	Formatiert markierten Text fett. Wenn die Markierung bereits fett ist, wird dies entfernt. Ist kein Text markiert so, können Sie nach dem Klick fett schreiben.
	Kursive Schrift	Formatiert markierten Text kursiv. Wenn die Markierung bereits kursiv ist, wird dies entfernt. Ist kein Text markiert, so können Sie nach dem Klick kursiv schreiben.
	Unterstreichen	Formatiert markierten Text unterstrichen. Wenn die Markierung bereits unterstrichen ist, wird dies entfernt. Ist kein Text markiert, so können Sie nach dem Klick unterstrichen schreiben.
	Durchstreichen	Formatiert markierten Text durchstrichen. Wenn die Markierung bereits durchstrichen ist, wird dies entfernt. Ist kein Text markiert, so können Sie nach dem Klick durchstrichen schreiben.
	Linksbündig	Richtet den markierten Bereich bzw. den aktuellen Block linksbündig mit einem unregelmässigen rechten Rand aus.
	Zentriert	Zentriert den markierten Bereich / aktuellen Block.
	Rechtsbündig	Richtet den markierten Bereich bzw. den aktuellen Block rechtsbündig mit einem unregelmässigen linken Rand aus.
	Blocksatz	Richtet den markierten Bereich bzw. den aktuellen Block rechts- und linksbündig aus.
	CSS-Stil
	Schriftformat	Hier können Sie eine Auswahl aus vordefinierten Formaten wie z.B. Überschriften oder Adresszeilen treffen.
	Ausschneiden	Löscht den markierten Text und legt ihn in der Zwischenablage ab, so dass er mit "Einfügen" eingefügt werden kann. Funktioniert nicht mit Mozilla und Firefox.
	Kopieren	Kopiert den markierten Text in die Zwischenablage. Funktioniert nicht mit Mozilla und Firefox.
	Einfügen	Fügt den Text aus der Zwischenablage an der aktuellen Position ein. Funktioniert nicht mit Mozilla und Firefox.
	Unformatierter Text einfügen	Öffnet ein Popup, in dem Sie einen Text einfügen können. Bei Klick auf "Einfügen" wird dieser Text unformatiert in das aktuelle Dokument eingefügt.
	Text Word-Formatiert einfügen	Öffnet ein Popup, in dem Sie einen mit MSWord formatierten Text einfügen können. Bei Klick auf "Einfügen" wird dieser Text samt Formatierungen in das aktuelle Dokument eingefügt.
	Text Suche	Hier können Sie nach bestimmten Zeichen oder Wörtern im Text suchen. Wird ein Wort gefunden, so ist es im Text grau markiert.
	Suchen/Ersetzen	Hier können Sie nach bestimmten Zeichen oder Wörtern im Text suchen (Suchen nach) und diese durch ein anderes ersetzten (Ersetzen durch). Mit "Ersetzen" tauschen Sie das aktuell markierte bzw. das erste gefundene Wort aus. Mit "Alle ersetzen" werden alle Wörter im Text ersetzt. Wollen Sie ein Wort überspringen drücken Sie "Weitersuchen" und das nächste Wort wird gesucht.
	Aufzählung	Fügt eine Aufzählung ein. Mit der Eingabetaste erreichen Sie einen neuen Aufzählungspunkt. Um die Aufzählung zu beenden, drücken Sie das Symbol erneut. Sie können auch einen Text markieren und ihn mit einem Klick auf das Symbol als Aufzählung formatieren. Dabei wird für jeden Zeilenumbruch ein neuer Aufzählungspunkt erstellt. Nach gleichem Prinzip können Sie diese auch entfernen.
	Nummerierung	Gleich wie die Aufzählung, doch statt Aufzählungspunkte wird eine Nummerierung eingefügt.
	Einzug verkleinern	Falls ein Einzug (eingerückte Textstelle) vorhanden ist, kann er mit dieser Schaltfläche verkleinert/entfernt werden.
	Einzug vergrössern	Hiermit wird der Text jeweils um ein Stück nach rechts eingerückt.
	Rückgängig	Macht den letzten Befehl rückgängig oder löscht den zuletzt eingegebenen Textabschnitt.
	Wiederherstellen	Macht die Aktion des Befehls "Rückgängig" rückgängig
	Link einfügen/bearbeiten	Markieren Sie eine Textstelle und fügen Sie mit dieser Schaltfläche einen Verweis auf eine andere Seite ein. Mehr dazu in Kapitel 2.1.3.
	Link entfernen	Damit entfernen Sie einen Link im markierten Text. Mehr dazu in Kapitel #Links erstellen.
	Anker einfügen/bearbeiten	Mehr dazu in Kapitel #Links erstellen.
	Bild einfügen/bearbeiten	Hiermit können Sie Bilder einfügen. Mehr dazu in Kapitel #Bilder einfügen.
	Unsauberen Code entfernen	Hiermit entfernen Sie Fehlerhaften HTML-Code.
	Hilfe	Ruft ein Fenster mit einem Hilfemenü und Produktinformationen auf.
	HTML-Quelltext editieren	Öffnet ein Popup mit dem Quelltext des aktuellen Textes. Hier können Sie auch direkt HTML-Code schreiben. Änderungen werden mit einem Klick auf aktualisieren sichtbar.
	Datum einfügen	Fügt das aktuelle Datum im Format DD.MM.YYYY ein.
	Zeit einfügen	Fügt die aktuelle Zeit im Format HH:MM:SS ein.
	Vorschau	Zeigt den aktuellen Text in einer weissen Vorschauseite an.
	Schriftfarbe wählen	Ändert die Schriftfarbe von markiertem Text bzw. ab dem Klick. Wählen Sie einfach die gewünschte Farbe aus der Palette aus.
	Hintergrundfarbe	Ändert die Schrifthintergrundfarbe von markiertem Text bzw. ab dem Klick. Wählen Sie einfach die gewünschte Farbe aus der Palette aus.
	Tabelle einfügen/bearbeiten	Fügt eine Tabelle ein. Mehr in Kapitel #Tabellen.
	Zeileneigenschaften	Kapitel #Tabellen
	Zelleigenschaften	Kapitel #Tabellen
	Zeile oberhalb einfügen	Kapitel #Tabellen
	Zeile unterhalb einfügen	Kapitel #Tabellen
	Zeile löschen	Kapitel #Tabellen
	Spalte links einfügen	Kapitel #Tabellen
	Spalte rechts einfügen	Kapitel #Tabellen
	Spalte löschen	Kapitel #Tabellen
	Zelle teilen	Kapitel #Tabellen
	Zellen verbinden	Kapitel #Tabellen
	Horizontaler Balken	Fügt einen einfachen, horizontalen Balken ein.
	Formatierung aufheben	Hebt Formatierungen wie fett,kursiv usw. im markierten Text bzw. ab dieser Stelle auf.
	Hilfslinien ein/ausblenden	Blendet Hilfslinien und Unsichtbare Elemente ein bzw. aus.
	Tiefgestellt	Markierter Text bzw. Text ab hier wird tiefgestellt geschrieben.
	Hochgestellt	Markierter Text bzw. Text ab hier wird hochgestellt geschrieben.
	Sonderzeichen einfügen	Öffnet ein Popup aus dem Sie ein Sonderzeichen auswählen und in den Text einfügen können.
	Flash-Datei einfügen	Fügen Sie eine Flash-Datei ein. Geben Sie die URL ein und bestimmen Sie die Grösse des Fensters.
	Horizontale Linie einfügen/bearbeiten	Fügt einen benutzdefinierten, horizontalen Balken ein. Sie können die Breite (in Pixel oder Prozent) und die Höhe angeben. Ausserdem können Sie einen Schatten setzen.
	Vollbildmodus	Hier wechseln Sie in den Vollbildmodus, d.h. der Editor wird über die ganze Seite angezeigt.
	Formularelement einfügen	Fügt ein Formularelement ein. Ein Popup öffnet sich und Sie können auswählen, welches Formularelement eingefügt werden soll und dafür weitere Einstellungen vornehmen. Diese Elemente dürfen Sie aber nur in einer Formulartabelle einfügen.
	Formulartabelle einfügen	Erstellt eine Formulartabelle. Die Bedienung ist gleich wie bei der normalen Tabelle. Hier müssen Sie aber noch eine Mailadresse angeben, an die ein gesendetes Formular geschickt wird und je einen Artikel der bei erfolgreichem bzw. fehlerhaftem Senden das Formulars angezeigt wird. Ausserdem enthält das Formular oben und unten zwei Bilder die nicht gelöscht werden dürfen. Sie sind auf der Website nicht mehr sichtbar.
	Seperator einfügen	Fügt einen Seperator ein. Mehr in Kapitel [#Seperator]
	Gästebuch einfügen	Fügt ein Gästebuch ein. Im Editor wird nur ein Platzhalter angezeigt.

Bilder einfügen

Bei einem Klick auf das Bildsymbol () öffnet sich ein Fenster. Dort können Sie das Bild auswählen und weitere Einstellungen vornehmen. Um diese danach wieder zu ändern, klicken Sie in das Bild und drücken dann das Bildsymbol oder machen Sie einen Rechtsklick im Bild und wählen dann "Bildeigenschaften".

Registerkarte "Allgemein":

Unter "Bild-URL" können Sie das einzufügende Bild auswählen. Klicken Sie dazu auf das Symbol rechts des Feldes. Nun erhalten Sie eine Liste aller in der Dateiverwaltung hochgeladenen Bilder, aus der Sie das gewünschte auswählen können.

"Bildbeschreibung" noch offen.

"Titel" noch offen.

Registerkarte "Erscheinungsbild":

Unter "Ausrichtung" können Sie wählen, wie das Bild im Text positioniert werden soll. Sie sehen rechts direkt eine Vorschau.

Darunter können Sie die Grösse des Bildes angeben. Die erste Angabe steht für die Höhe, die zweite für die Breite. Ist das Häkchen bei "Verhältnis beibehalten" gesetzt, so müssen Sie nur eine dieser Grössen angeben, die zweite wir automatisch angepasst. Haben Sie bereits ein Bild ausgewählt, stehen in den Feldern die Grössen des Originalbildes. Bei Grössenänderungen müssen Sie aufpassen: Das Bild sollte grundsätzlich in der Grösse hochgeladen werden, in der es benötigt wird, da bei Vergrösserungen das Bild pixelig und bei Verkleinerungen das Bild trotzdem noch in der original Dateigrösse heruntergeladen wird.

Bei "Vertikaler Raum" und "Horizontaler Raum" können Sie den Abstand um das Bild festlegen. "Vertikaler Raum" sind die Abstände links und rechts, "Horizontaler Raum" oben und unten. Die Angaben erfolgen in Pixel.

Bei Bedarf können Sie unter "Rahmen" einen Rand um das Bild setzen.

Unter "CSS-Klasse" können Sie dem Bild eine vordefinierte Klasse Ihres CSS zuweisen.

"CSS-Stil" noch offen.

Registerkarte "Erweitert":

Hier können Sie ein Alternativbild für den Event "Mouse-Over" und "Mouse-Out" festlegen. Das heisst, dass bei diesen Events das Bild durch das hier ausgewählte ersetzt wird. Mouse-Over ist die Situation, in der der Mauszeiger über dem Bild liegt. Mouse-Out ist der Moment, in dem man mit dem Mauszeiger aus dem Bild fährt. Setzen Sie beispielsweise beide Events: Mouse-Over ein anderes als das Hauptbild und Mouse-Out das gleiche wie das Hauptbild. Somit kann man mit dem Mauszeiger über das Bild fahren und solange man sich über dem Bild befindet wird das Bild von "Mouse-Over" angezeigt. Sobald man wieder herausfährt (Mouse-Out) wird wieder das Hauptbild angezeigt. Die Auswahl des Bildes erfolgt auch hier über die Bildliste der hochgeladenen Dateien.

Die Einstellungen unter "Sonstiges" sollten nur bei Kenntnis Ihrer Bedeutung geändert werden. Deshalb werden Sie hier auch nicht aufgeführt.

Um den Vorgang abzuschliessen drücken Sie schlussendlich "Einfügen" um das Bild einzufügen bzw. "Aktualisieren" um die Änderungen zu speichern.

Links erstellen

Markieren Sie die Textstelle, der Sie einen Link zuweisen wollen. Nun klicken Sie auf das Linksymbol () und ein Fenster öffnet sich. Dort müssen Sie die Link-URL angeben und können weitere Einstellungen vornehmen. Um diese danach wieder zu ändern, Klicken Sie in den Link (blaue Schrift/unterstrichen) und drücken dann das Linksymbol oder machen Sie einen Rechtsklick und wählen dann "Link einfügen/bearbeiten".

Registerkarte "Allgemein":

Unter "Link-URL" geben Sie die Adresse (z.B. www.dynpg.ch) oder die Seite (z.B news.php) an auf die verwiesen werden soll. Sie können auch auf ein Bild verweisen, um so beispielsweise ein Bild in der Grossansicht anzuzeigen. Dazu klicken Sie aus das Bilderliste-Symbol rechts des Feldes.

Bei "Anker" können Sie den Anker auswählen, auf den gesprungen werden soll. Mehr zu Anker finden Sie am Ende dieses Kapitels.

Bestimmen Sie unter "Ziel" in welchem Fenster (aktuelles Fenster, neues Fenster) die verlinkte Seite öffnen soll.

Darunter haben Sie die Möglichkeit einen Titel für den Link zu vergeben.

Unter "CSS-Klasse" können Sie dem Bild eine vordefinierte Klasse Ihres CSS zuweisen.

Registerkarte "Popup":

Hier können Sie ein JavaScript-Popup erstellen. Damit wird bei Klick auf den Link ein Fenster mit speziellen Eigenschaften geöffnet. Geben Sie in unter "Popup-URL" die zu öffnende Seite an. Darunter können Sie einen Namen vergeben. Unter "Grösse" bestimmen Sie die Fenstergrösse des Popups. Die erste Grösse steht für die breite, die zweite für die höhe. Unter "Position (X/Y)" können Sie festlegen wie viele Pixel das Fenster vom linken (X) bzw. vom oberen (Y) Bildschirmrand entfernt sein soll. Geben Sie beide mal ein 'c' ein um es zentral auszurichten. Bei den "Optionen" können Sie dann noch weitere Einstellungen für das Fenster vornehmen und bestimmte Leisten ein oder ausblenden.

Registerkarten "JS-Events" und "Erweitert":

Die einzelnen Punkte werden hier nicht mehr aufgeführt, da diese Registerkarten nur für Fortgeschrittene geeignet sind.

Unter "JS-Events" können Sie Aktionen für die Eventhandler von JavaScript festlegen.

Unter "Erweitert" können Sie erweiterte Einstellungen für diesen Link vornehmen.

Um einen Link zu entfernen, markieren Sie die entsprechende Stelle und drücken auf die Schaltfläche "Link entfernen" ().

Der "Anker":

Ein Anker ist eine benannte Stelle im Text, den Sie mit Hilfe eines normalen Links gezielt anspringen können. Dies ist beispielsweise sinnvoll, um bei längeren Texten zu den einzelnen Kapiteln springen zu können oder um vom Textende mit einem Klick wieder nach oben zu gelangen. Um einen Anker zu setzen, klicken Sie an der anzuspringenden Stelle (z.B. vor einem Kapitel / einem wichtigen Absatz /einem bestimmten Bild) das Ankersymbol () und geben anschliessend einen Namen ein. Danach erstellen Sie an der Stelle von der man zum Anker gelangen soll einen Link () und wählen unter "Anker" den zuvor benannten Ankers aus. Den Ankernamen können Sie ändern, indem Sie den Anker () und danach das Ankersymbol klicken.

Tabellen

Um eine Tabelle einzufügen klicken Sie auf das Symbol "Tabelle einfügen" (). Nun öffnet sich ein Fenster, in dem Sie Einstellungen für die Tabelle vornehmen können. Um diese im nachhinein zu Ändern drücken Sie erneut auf das Symbol, während Sie sich mit der Maus in der Tabelle befinden.

Registerkarte "Allgemein":

Geben Sie in der ersten Zeile die Anzahl Spalten und Zeilen für diese Tabelle an.

Unter "Zellenauffüllung" legen Sie den Innenabstand, mit "Zellenabstand" den Aussenabstand jeder Zelle fest.

Danach können Sie die Ausrichtung der Tabelle im Text wählen.

Bei Bedarf haben Sie die Möglichkeit einen Rahmen für die Tabelle zu ziehen. Setzten Sie den Wert auf "0" wenn Sie keinen Rahmen wünschen. Dann werden lediglich Hilfslinien angezeigt.

In der vierten Zeile können Sie die Breite und die Höhe der Tabelle festlegen. Wenn Sie keine Angaben machen, wird die Grösse automatisch angepasst.

Unter "CSS-Klasse" können Sie der Tabelle eine vordefinierte Klasse Ihres CSS zuweisen.

Drücken Sie den "Erstellen" bzw. "Aktualisieren" Button, um den Vorgang abzuschliessen.

Registerkarte "Erweitert":

Hier können Sie erweiterte Einstellungen machen. Es werden allerdings im folgenden nur noch die wichtigsten erläutert.

Unter "Hintergrundbild" haben Sie die Möglichkeit ein Bild im Hintergrund der Tabelle anzuzeigen. Klicken Sie dazu das Symbol rechts des Feldes und wählen dann das Bild aus der Liste der hochgeladenen Dateien.

Insofern Sie dies nicht mittels einer CSS-Klasse definieren, eine Rahmen- und eine Hintergrundfarbe festlegen. Drücken Sie dazu auf das Farbauswahlsymbol rechts des entsprechenden Feldes und wählen dann die gewünschte Farbe aus der Farbpalette.

Drücken Sie den "Erstellen" bzw. "Aktualisieren" Button, um den Vorgang abzuschliessen.

Seperator

Texte können an bestimmten Stellen unterbrochen werden, so dass ein Besucher der Website vorerst nur einen Teil des Textes sieht und dann entscheiden kann, ob er weiterlesen will. Dies geschieht mit einem Klick auf einen Link (z.B. "Gesamten Artikel lesen"). Der Text wird an der Stelle unterbrochen, an welcher der Seperator () gesetzt wird. Es muss nicht immer sein, dass ein Text der einen Seperator enthält auch unterbrochen wird. Denn wann und wo der Seperator berücksichtigt wird, legt jene Person fest, welche die Webseiten auch erstellt.

Texte speichern

Um einen Text zu speichern, drücken Sie im unteren Bereich des Editor den Button "Erstellen". Wollen Sie den Text speichern und gleich einen Artikel mit diesem Inhalt erstellen, geben Sie im Drop-Down Menü die gewünschte Gruppe an und drücken Sie anschliessend den Button "Text und zugehörigen Artikel erstellen". Sie wechseln dann automatisch zur Artikelverwaltung, wo Sie noch weitere Einstellungen für diesen Artikel machen können und ihn anschliessend speichern. Mehr zu Gruppen und Artikel in Kapitel 3 und 4.

Texte verwalten

Unterhalb des Editors sind alle Texte aufgelistet. Sie können unter der Spalte "Aktionen" diverse Änderungen vornehmen:

Mit einem Klick auf den Kugelschreiber () können Sie die Texte bearbeiten. Wollen Sie die vorgenommenen Änderungen speichern, drücken Sie auf "Ändern".

Das Doppel-Blatt () erstellt ein Duplikat, also eine Kopie des jeweiligen Textes.

Mit dem roten Kreuz () können Sie einen Text löschen.

Ausserdem haben Sie über der Auflistung der Texte die Möglichkeit nach verschiedenen Kriterien bestimmte Texte zu suchen. Wählen Sie eine Gruppe in welcher der gesuchte Text enthalten ist (nach Gruppen...) oder suchen Sie nach einem bestimmten Suchwort (nach Text suchen). Dann können Sie noch angeben welche Seitenzahl und wie viele Suchergebnisse pro Seite angezeigt werden sollen. Danach drücken Sie auf "anzeigen" und die gefundenen Texte werden in der Liste ausgegeben.

Diese Informationen als PDF

Diese Artikel finden sie auch als PDF Datei. Diese Datei wird jedoch möglicherweise nicht mehr aktualisiert und ist damit nicht so aktuell wie dieser Artikel.