Clixbloom News Artikel

Online Marketing und vegane Themen

Das CKEditor WYSIWYG Tutorial für Anfänger

Screenshot: TinyMCE

Werde zum Power-User durch elementares HTML Know-How. Der für deine Homepage oftmals in Content Management Systemen verwendete WYSIWYG CKEditor wird dich durch seine leichte Bedienung beeindrucken.

Der erste Blick auf den CKEditor:

CKEditor sieht nicht nur moderner aus, sondern bietet interessante programmatische Optionen im Vergleich zum ebenfalls bekannten WYSIWYG Editor TinyMCE. Dennoch ist die Bedienung beider Editoren ziemlich ähnlich. Sie können dieses Tutorial ebenfalls für TinyMCE verwenden.

Beim Aufruf des Editors siehst du eine variierende Symbolleiste mit vielen bekannten Formatierungsmöglichkeiten.

CKEditor Navigation Elemente
Screenshot: CKEditor Navigation Elemente

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 Bilder/Screenshots deines Tabellenprogramms oder anderer Software.

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 CKEditor eingefügt:

Vestibulum eu nunc

Fuchs Tutorial Beispielfoto
Foto: Fuchs, dreamstime.com, 12qwerty

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 CKEditor aufgerufen haben, kannst du sofort loslegen.

Schritt 1: Überschriften erstellen

CKEditor Überschrift einfügen
Screenshot: CKEditor Überschrift einfügen

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 h4“ stehen. „h4“ 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.

CKEditor Bild einfügen und links positionieren
Screenshot: CKEditor Bild einfügen und links positionieren

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

CKEditor Text
Screenshot: CKEditor Text

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

CKEditor Anker
Screenshot: CKEditor Anker

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 (Editor TinyMCE 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

CKEditor Link
Screenshot: CKEditor Link

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 von TinyMCE:

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:

CKEditor Code
Screenshot: CKEditor Code

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: Der WYSIWYG CKEditor hält was er verspricht. Der CKEditor wird unter den Lizenzen GPL, LGPL oder MPL angeboten. Für dieses Tutorial wurden Screenshots von der Version 4.4.3 des CKEditors in meinem Favoriten 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

Tutorial wie du mit dem ProcessWire CMS Webseiten kreierst und editierst

Das Matomo Web Analytics Tool 3+ erkunden: Vorteile und Komponenten

von Iris Mitlacher, vom: 01.10.2014, zuletzt geändert: 04.04.2019

Kommentare sind nicht mehr möglich.

Clixbloom Blog

News und Blogartikel von Clixbloom

Ob einfach oder komplex aufgebaute Webseiten, das flexible ...

Weiter ...

Eine Homepage für das eigene Unternehmen zu erstellen bringt ...

Weiter ...

Möchstest du deine veganen Produkte/Leistungen vermarkten, gibt ...

Weiter ...

Für ein besseres Nutzererlebnis werden von dieser Homepage Cookies gesetzt.Cookie Informationen