Das WYSIWYG Editor Tutorial für Anfänger
Der erste Blick auf den WYSIWYG Editor:
Ein WYSIWYG Editor bietet interessante Optionen im Vergleich zum puren HTML Code. In diesem Tutorial wird der CKEditor verwendet. Aufgrund der ähnlichen Bedienung könnte auch ein anderer WYSIWYG Editor wie zum Beispiel TinyMCE eingesetzt werden.
Beim Aufruf des Editors siehst du eine variierende Symbolleiste mit vielen bekannten Formatierungsmöglichkeiten.
Unter den generellen Formaten (Normal) findest du die Überschriften, Absatz und Adresse. Die Überschriften Heading 1, Heading 2 etc. werden nach Größe aufgelisted.
Maßgeschneiderte Formate (Styles) stylen Elemente spezifisch nach deinen Anforderungen (von Agenturen oder intern in deinem Unternehmen entwickelt). Die Auswahl eines Formates wird das Element entsprechend gestalten.
Diverse weitere Text-Formate für deine Präsentation: Fett, Italic, nummerierte und unnummerierte Listen sowie Quotierungen.
Du willst ein Link zu einer anderen Seite im Internet oder in deine eigene Site einfügen. Das kannst du selbst machen. Die Anleitung folgt.
Ein Anker ist eine Markierung innerhalb einer Seite. Setze zur Markierung ein Link. Wie, erfährst du gleich.
Dein Editor fügt Bilder fast von alleine ein. Du bekommst ein Beispiel, wie das auf dem von meinem verwendeten Content Management System funktioniert - das sollte ähnlich bei deinem System sein.
Weitere Elemente, die du jedoch selten nutzt, sind Tabelle, Trennlinien und Sonderzeichen. Damit komplexe Tabellen selbst auf kleinen Bildschirmen (Smartphones etc.) gut aussehen, verwende dafür bestimmtes CSS Styling oder Bilder/Screenshots deines Tabellenprogramms.
Ist das Ergebnis nicht so, wie du es erwartet hast, dann kannst du direkt den HTML Code ansehen und ändern.
Inhalt zum Ausprobieren:
Folgender Inhalt wird nun Schritt bei Schritt in den Editor eingefügt:
Vestibulum eu nunc
Fusce auctor scelerisque urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin dapibus magna eu libero. Cras placerat velit vitae neque. Duis commodo tempor urna, non imperdiet sem cursus et. Etiam ac lacinia neque. Vestibulum vestibulum vitae metus hendrerit ultrices.
Aenean eleifend posuere tellus, et imperdiet ipsum facilisis non. Aenean tellus ante, imperdiet eu dui eu, accumsan blandit neque. Nullam fringilla, risus ac sodales condimentum, nisl lectus semper risus, sed tincidunt lacus erat vitae leo. Etiam venenatis lacus quis enim congue porttitor.
Falls du jetzt schon den Editor aufgerufen hast, kannst du sofort loslegen.
Schritt 1: Überschriften erstellen
Selektiere nun die Überschrift „Vesti….“ und kopiere diese via „STRG“ und „c“ in den Editor (stelle deinen Browser ein, dass Text kopieren erlaubt ist). Wähle unter der Auswahlliste „Normal“ oder anderer Bezeichnung „Überschrift 3“ oder „Heading 3“ aus.
Überprüfung: Klicke auf den Text und schaue auf die untere graue Leiste. Dort sollte „body h3“ stehen. „h3“ ist das dritte Überschriftstag von HTML. Fehler? Um zum vorherigen Stand des Editors zu gelangen, drücke gleichzeitig „STRG“ und „z“.
Schritt 2: Foto nach links justieren und Randabstände setzen
Nun ist es Zeit dein eigenes Foto in das Content Management System (CMS) oder Webshop zu laden. So kannst du beispielsweise im CMS ProcessWire Fotos vor der Nutzung hochladen.
Um ein Foto einzufügen, klicke im Editor nach der Überschrift und mache einen Zeilenumbruch. Wähle das Symbol mit der Berglandschaft und der Sonne aus. Du solltest nun in der Lage sein das Bild auszuwählen oder im Bildverzeichnis ein Bild hochzuladen.
Adjustiere die Größe des Bildes (Breite & Höhe). Achte darauf, dass das Verhältnis stimmt, d.h. das Bild nicht verzerrt wird. In ProcessWire wird dies durch das Ziehen der Ecke rechts unten gemacht. Das Foto wurde links positioniert, damit der Text das Foto rechts umfließt. Gebe unbedingt eine kurze Beschreibung für SEO ein.
Überprüfung: „body p img“. Das Tag <img> steht in HTML für Bild bzw. Image.
Schritt 3: Text als Absatz einfügen
Der Editor Zeiger sollte nun direkt hinter dem Foto blinken. Kopiere dort den Text „Fusce auctor…“. Die Absätze mit jeweils Start- und Endtag < p>...</p> werden automatisch erstellt. Wer innerhalb eines Absatzes einen Zeilenumbruch < br> forcieren will, der gibt einfach „STRG“ und einen Zeilenumbruch zusammen ein.
Überprüfung: body p.
Schritt 4: Anker einfügen
Um auf eine bestimmte Stelle einer Seite zu verlinken wird ein Anker (engl. anchor) gesetzt. Selektiere den Ankertext und klicke auf das Icon mit der Flagge (CKEditor nutzt einen Anker). Du bekommst eine Dialogbox in der du eine Ankerbezeichnung z.B. „meinanker“ einträgst.
Überprüfung: body anchor. Es wird eine ID namens „meinanker“ im <p> Tag kreiert.
Schritt 5: Link setzen
Selektiere den Text „ Fusce auctor“. Das Symbol, das wie eine Kette (Link einfügen) aussieht, wird in der Symbolleiste stärker sichtbar. Im Link Dialog gebe eine Adresse ein, z. B. „http//www.othersite.com“ oder wähle eine Seite aus deiner Linkliste. Wenn du zum zuvor erstellten Anker „meinanker“ verweisen willst, füge am Ende der URL #meinanker hinzu.
Überprüfung: body p a. Das Tag <a> steht für Link.
Du bist jetzt fast mit dem Tutorial fertig. Rufe nun deine Seite im Browser auf und vergleiche diese. Zeigt sich der Text nicht neben dem Foto an, fehlt das Styling für die Postionierung. - Das Styling kann deinen CSS Dateien hinzugefügt werden (durch eine Agentur oder Mitarbeiter).
Schritt 5: Der HTML Code vom Editor:
Du möchtest den Inhalt auch in HTML ansehen. Drücke auf das „HTML“ Symbol von der Symbolleiste. Dein HTML Code sollte diesem Code ähneln:
Tipp: Falls du den HTML Code änderst, mache eine Kopie des HTML Codes z. B. in Notepad (Windows: Start>Ausführen> notepad.exe eingeben).
Fazit: Ein WYSIWYG Editor hält was er verspricht. Der gezeigte CKEditor wird unter den Lizenzen GPL, LGPL oder MPL angeboten. Für dieses Tutorial wurden Screenshots von der Version 4.4.3 des CKEditors im Content Management System (CMS) ProcessWire verwendet. Siehe dazu das Tutorial unter weiterführende Links. Halte die Informationen auf deiner Website/Shop aktuell.
Bilder/Screenshots/Fotos: dreamstime.com 12qwerty Foto, www.ckeditor.com CKEditor.
Weiterführende Links
HTML Links auf deiner Homepage verstehen
Wie du mit dem ProcessWire CMS Webseiten editierst
Web Analytics anhand von Matomo 3+ erkunden
Autor/in: Iris Mitlacher