Clixbloom News Artikel

Online Marketing und vegane Themen für Sie

Das CKEditor WYSIWYG Tutorial für Anfänger

CKEditor

Screenshot: TinyMCE

Der moderne WYSIWYG CKEditor wird Sie durch seine leichte Bedienung beeindrucken. Lernen Sie die am Häufigsten verwendeten Elemente kennen: Texte, Anker, Links und Bilder. Werden Sie zum Power-User durch elementares HTML Know-How.

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 sehen Sie eine variierende Symbolleiste mit vielen bekannten Formatierungsmöglichkeiten.

CKEditor Navigation Elemente
Screenshot: CKEditor Navigation Elemente

Unter den generellen Formaten (Normal) finden Sie 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 Ihren Anforderungen (von Agenturen oder intern in Ihrem Unternehmen entwickelt). Die Auswahl eines Formates wird das Element entsprechend gestalten.

Diverse weitere Text-Formate für Ihre Präsentation: Fett, Italic, nummerierte und unnummerierte Listen sowie Quotierungen.

Sie wollen ein Link zu einer anderen Seite im Internet oder in Ihre eigene Site einfügen. Das können Sie selbst machen. Die Anleitung folgt.

Ein Anker ist eine Markierung innerhalb einer Seite. Sie können zur Markierung ein Link setzen. Wie, erfahren Sie gleich.

Ihr Editor fügt Bilder fast von alleine ein. Sie bekommen ein Beispiel, wie das auf dem von uns verwendeten Content Management System funktioniert - das sollte ähnlich bei Ihrem System sein.

Weitere Elemente, die Sie jedoch selten nutzen, sind Tabelle, Trennlinien und Sonderzeichen. Damit komplexe Tabellen selbst auf kleinen Bildschirmen (Smartphones etc.) gut aussehen, verwenden Sie Bilder/Screenshots Ihres Tabellenprogramms oder anderer Software.

Ist das Ergebnis nicht so, wie Sie es erwartet haben, dann können Sie 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 Sie jetzt schon den CKEditor aufgerufen haben, können Sie sofort loslegen.

Schritt 1: Überschriften erstellen

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

Selektieren Sie nun die Überschrift „Vesti….“ und kopieren Sie diese via „STRG“ und „c“ in den Editor (stellen Sie Ihren Browser ein, dass Text kopieren erlaubt ist). Wählen Sie unter der Auswahlliste „Normal“ oder anderer Bezeichnung „Überschrift 3“ oder „Heading 3“ aus.

Überprüfung: Klicken Sie auf den Text und schauen sie auf die untere graue Leiste. Dort sollte „body h5“ stehen. „h5“ ist das dritte Überschriftstag von HTML. Fehler? Um zum vorherigen Stand des Editors zu gelangen, drücken Sie gleichzeitig „STRG“ und „z“.

Schritt 2: Foto nach links justieren und Randabstände setzen

Nun ist es Zeit Ihr eigenes Foto in das Content Management System (CMS) oder Webshop zu laden. So können Sie beispielsweise im CMS Processwire Fotos vor der Nutzung hochladen.

Um ein Foto einzufügen, klicken Sie im Editor nach der Überschrift und machen Sie einen Zeilenumbruch. Wählen Sie das Symbol mit der Berglandschaft und der Sonne aus. Sie sollten 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

Adjustieren Sie die Größe des Bildes (Breite & Höhe). Achten Sie darauf das 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. Geben Sie 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. Kopieren Sie 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. Selektieren Sie den Ankertext und klicken Sie auf das Icon mit der Flagge (Editor TinyMCE nutzt einen Anker). Sie bekommen eine Dialogbox in der Sie eine Ankerbezeichnung z.B. „meinanker“ eintragen.

Überprüfung: body anchor. Es wird eine ID namens „meinanker“ im <p> Tag kreiert.

Schritt 5: Link setzen

CKEditor Link
Screenshot: CKEditor Link

Selektieren Sie den Text „ Fusce auctor“. Das Symbol, das wie eine Kette (Link einfügen) aussieht, wird in der Symbolleiste stärker sichtbar. Im Link Dialog geben Sie eine Adresse ein, z. B. „http//www.othersite.com“ oder wählen Sie eine Seite aus Ihrer Linkliste. Wenn Sie zum zuvor erstellten Anker „meinanker“ verweisen wollen, fügen Sie am Ende der URL #meinanker hinzu.

Überprüfung: body p a. Das Tag <a> steht für Link.

Sie sind jetzt fast mit dem Tutorial fertig. Rufen Sie nun Ihre Seite im Browser auf und vergleichen Sie diese. Zeigt sich der Text nicht neben dem Foto an, fehlt das Styling für die Postionierung. - Das Styling kann Ihren CSS Dateien hinzugefügt werden (durch eine Agentur oder Mitarbeiter).

Schritt 5: Der HTML Code von TinyMCE:

Sie möchten sich den Inhalt auch in HTML ansehen. Drücken Sie auf das „HTML“ Symbol von der Symbolleiste. Ihr HTML Code sollte diesem Code ähneln:

CKEditor Code
Screenshot: CKEditor Code

Tipp: Falls Sie den HTML Code ändern, machen Sie 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 unserem Favoriten Content Management System (CMS) ProcessWire verwendet. Sehen Sie dazu das Tutorial unter weiterführende Links. Halten Sie die Informationen auf Ihrer Website/Shop aktuell.

Bilder/Screenshots/Fotos: dreamstime.com 12qwerty Foto, www.ckeditor.com CKEditor.

Weiterführende Links

Tutorial wie Sie mit dem ProcessWire CMS Webseiten kreieren und editieren

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

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

Kommentare sind nicht mehr möglich.

Clixbloom News

Neuigkeiten von Clixbloom

Wie funktioniert die biozyklische-vegane Landwirtschaft?

Im Vergleich zur bio-veganen Landwirtschaft geht die biozyklische-vegane Landwirtschaft noch einen Schritt weiter. Die biozyklisch-vegane Landwirtschaft basiert auf einem geschlossenen landwirtschaftlichen Kreislauf innerhalb des Betriebs. Bei beiden Anbauarten ist keine Tierhaltung notwendig. Der Anbau wird ökologisch und mit aus Pflanzen gewonnenen Düngemitteln durchgeführt.

von Iris Mitlacher

Weiter ...

Neue Online Marketing Gelegenheit bei Clixbloom

Wollen Sie Ihre veganen Produkte/Leistungen vermarkten, haben wir eine neue Möglichkeit für Sie: unsere Website www.awfullyvegan.de über den veganen Lifestyle. Hier erreichen Sie Ihre veganen Kunden durch attraktive, persönliche Blogartikel. Damit bekommen Sie eine ansprechende Online Marketing Plattform.

von Iris Mitlacher

Weiter ...

Sie stimmen bei weiterer Nutzung dieser Website der Verwendung von Cookies zu.Cookie Informationen