© saicle/Shutterstock.com
Mit dem Frontend-Editor in WordPress arbeiten

Mit dem Frontend-Editor in WordPress arbeiten


Ein Frontend-Editor ermöglicht das Editieren von Inhalten direkt auf der Website. Das spart viel Zeit beim Bereitstellen von Inhalten.

Das Editierbedienelement Fronend-Editor ist vergleichbar mit dem eines Desktoptexteditors à la MS Word. Ein Wechsel in den Backend-Bereich für das bloße Bearbeiten von Texten fällt damit zeitsparend weg. Zudem befindet man sich permanent im Layout der Seitenansicht und hat so die Möglichkeit, Textänderungen visuell kontrollieren zu können. Das Frontend-Editor-Plug-in für WordPress [1] kommt direkt auf der Webseite zum Einsatz. Nach erfolgreicher Anmeldung am CMS erscheint mit einem Klick auf den eingeblendeten Edit-Button der pinnbare Floating-Editor. Inhalte können damit direkt auf den Seiten bearbeitet, geschrieben oder formatiert werden. Der Wechsel ins Backend fällt weg.

Das spart viel Zeit, die den Wechsel zwischen Seitenansicht und Backend-Texteditor geopfert werden müsste. Gerade für Redakteure und Blogger ist diese Option sehr interessant, da diese Leute doch in erster Linie ihre Aufmerksamkeit auf den Inhalt und die Texte der bestehenden Seiten richten. Sie können damit intuitiver Arbeiten, denn das Navigieren durch die Seiten entspricht eher dem eines Lesers und es wird nicht durch lästiges Hin-und-her-Klicken zwischen Seitenansicht und dem Editor im Backend gestört. Nach dem Anmelden am CMS werden editierbare Bereiche mit einem Edit-Button gekennzeichnet. Nach dem Anklicken öffnet sich der Frontend-Editor (Abb. 1).

floeter_editor_1.tif_fmt1.jpgAbb. 1: Frontend-Editor

Möglich gemacht wird das direkte Editieren von Texten innerhalb der Layoutansicht durch ein Zusammenspiel von mehreren Server- und Clienttechnologien. Das WordPress-Plug-in verwendet den Aloha-Editor, der die Techniken zur Datenübertragung zwischen Client und Server bereits mit bereitstellt. Dabei wird auch jQuery eingebunden. Zuerst aber wird der HTML-Code mit CSS-Klassen und -Attributen angereichert, um die Stellen im HTML zu kennzeichnen, die vom Editor geändert werden können. Der Editor selbst besteht aus HTML und CSS und wird unterhalb des zu editierenden Textbereichs mittels des position:fixed-CSS-Attributs über der Seite positioniert. Zur Änderung vom HTML-Text kommen JavaScript-Klassen zum Tragen. Sie fügen neuen HTML-Code ein oder löschen bzw. ändern ihn nach einem definierten Vorgehen.

Für die Datenübertragung steht ein Repository-API bereit, das die Änderungen per JSON-Daten sendet. Anzugeben ist dabei die entsprechende Speicher-Location, die bei einem CMS bekannt s...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang