Das letztlich fehlende Feature - TYPO3 Frontend-Editing

Seit 20 Jahren ist das TYPO3 Frontend Editing ein lang ersehntes Feature für das TYPO3 CMS. Was ist im Moment im Jahr 2020 das bestmögliche TYPO3 Frontend Inline Editing? Die Antwort erhalten Sie in diesem Blogbeitrag, lesen Sie weiter!

Das letztlich fehlende Feature - TYPO3 Frontend-Editing

FYI. This blog is translated by machine. Please ignore any spelling and grammar errors; sorry for such inconvenience. We appreciate your understanding and support.

Seit 20 Jahren ist das TYPO3 Frontend Editing ein lang ersehntes Feature für das TYPO3 CMS. Was ist im Moment im Jahr 2020 das bestmögliche TYPO3 Frontend Inline Editing? Die Antwort erhalten Sie in diesem Blog-Beitrag, lesen Sie weiter!

Warum wurde Neos CMS geboren? Wegen eines Hauptgrundes: "Frontend Editing Feature" (soweit ich weiß). Warum sie sich von TYPO3 getrennt haben, ist eine andere Kontroverse, die ich eines Tages versuchen werde zu schreiben ;) Meiner Meinung nach war "TYPO3 Frontend Editing" eine der wichtigsten Initiativen der TYPO3-Community seit 2016. Aber leider sind drei große TYPO3-Versionen vergangen, und es ist immer noch nicht im TYPO3-Kern verfügbar. Aber ich weiß, dass das Team von pixelant (insbesondere mein Freund Matthias Bolt) eifrig dabei ist, es so schnell wie möglich in den TYPO3-Core zu bringen :)

Wie auch immer, was ist der Stand der Dinge und die beste Möglichkeit, im Jahr 2020 das beste TYPO3-Frontend-Editing-Erlebnis zu bieten, Let's checkout - Nehmen Sie eine gute Tasse Kaffee ;)

Wie Sie in der TYPO3-Umfrage sehen können, ignorieren die TYPO3-Leute "TYPO3 Frontend Editing". Ich bin mir nicht sicher, warum!!

Heutzutage haben die beliebtesten CMS hervorragende "Frontend Editing"-Funktionen eingebaut, wie unten dargestellt.

  • WordPress Gutenberg/VisualComposer
  • Wix
  • Squarespace

Natürlich nehmen viele Leute die Bearbeitung des TYPO3-Frontends etwas ernster, deshalb haben wir seit einem Jahr zwei Erweiterungen 1. EXT:feedit, 2. EXT:frontend_editing.

Kollaboratives Editieren

Diese Eigenschaft der Frontend-Editoren ist die meistgewünschte TYPO3-Editierfunktion und ermöglicht Echtzeit-Editierungen mit einem modernen TYPO3 Content Management System!

Umfangreiche UI-Funktionen

Neben einer unabhängigen Sicht auf Ihre TYPO3-Datenmodelle können Sie über die neuesten, intelligent gestalteten UI-Funktionen bessere Möglichkeiten zum Ändern und Kommentieren von Daten erreichen.

Robust undo/redo systems.

Frontend-Editoren (z.B. CKEditor) helfen Ihnen, eine sichere Grundlage für definierte Datenaktionen zu erhalten. Seufzen Sie also nicht, wenn Sie dazu neigen, Fehler zu machen, sondern machen Sie falsche Änderungen rückgängig und machen Sie schnell weiter mit einem intelligent gestalteten TYPO3 CKEditor.

Leistungsstarke API

Würden Sie nicht gerne Zugang zu einer robusten API erhalten, die Daten entkoppelt und erweiterte Funktionen in Ihr Frontend-Editing-System einführt? CKEditor bietet reichhaltige UI-Widgets für den effektiven Umgang mit Ihren Daten, egal wie groß oder klein.

Jahrelang hatte der TYPO3-core ein Frontend-Editing-Feature namens "feedit", aber es wurde aus dem TYPO3-core entfernt und als separate Extension gepflegt. Sie können es die "partielle Frontend-Bearbeitung" Funktion nennen, überprüfen Sie, warum mit den Schritten unten!

Schritt 1. Installation von EXT:feedit

Installieren Sie die Erweiterung "feedit" mit oder ohne Composer. Aktivieren von Admin Tools > Extensions > Activate “Frontend Editing” extension.

Installation with Composer
composer require friendsoftypo3/feedit

Schritt 2. TYPO3 Frontend Admin Panel aktivieren

Sie müssen das Frontend-Adminpanel mit einer der folgenden Optionen aktivieren.

 

// Option 1. TypoScript Show admin panel
config.admPanel = 1
config.admPanel.enable.all = 1

// Option 2. User TSconfig to disable the admin panel for a user:
admPanel.hide = 1

Schritt 3. Option "Bearbeiten" im Admin-Bereich einstellen

Gehen Sie zu Ihrer Frontend-Site, klicken Sie auf "Setting" im unteren Admin-Panel. Aktivieren Sie die Anzeige von Bearbeitungssymbolen und Bedienfeldern, und vergessen Sie nicht, auf die Schaltfläche "Update Setting" zu klicken, um sie zu speichern ;)

Schritt 4. Statische Vorlage einbinden (feedit)

Weiter zu TYPO3 Backend > Template > Root page > Statische Vorlage einbinden “Frontend Editing (feedit).

Schritt 5. Live-Frontend-Bearbeitung

Jetzt sollten Sie die Symbole "Frontend-Bearbeitung" zu jedem Inhaltselement auf Ihrer Frontend-Seite sehen können.

Schritt 6. Editieren erleben

Testen Sie es, indem Sie bei einem bestimmten TYPO3-Inhaltselement auf das "edit icon" klicken. Es öffnet sich dann ein "backend form", mit dem Sie das Inhaltselement einfach bearbeiten/löschen können.

Wussten Sie schon von der brandneuen frontend_editing TYPO3 Extension? Nach der Integration eines der weltweit beliebtesten CKEditor-Plugins in den TYPO3-Kern, sind die Leute begierig darauf, die Vorteile der leistungsstarken Inline-Editing-Funktion von CKEditor zu nutzen.

"TYPO3 Frontend Editieren einer Website war noch nie so einfach. What-You-See-is-What-You-Get-Editing für jeden TYPO3-Anwender."
- Pixelant (TYPO3 agency that initiates frontend_editing extension).

Crowdfunding Geschichte

Zur Zeit von TYPO3 v8 sammelte die TYPO3-Community 65.000 €, um das bemerkenswerte Feature "Frontend Inline Editing" zu entwickeln.

TYPO3-Versionskompatibilität

Das Gute daran ist, dass Team frontend editing stolz alle wichtigen TYPO3 Versionen v8, v9, v10 unterstützt.

Wie auch immer, machen Sie sich bereit, einige praktische Dinge für die Erweiterung frontend_editing zu sehen!

Schritt 1. Installation von EXT:frontend_editing

Installieren Sie “frontend_editing” Erweiterung mit oder ohne Composer. Aktivieren von Admin Tools > Extensions > Activate “Frontend Editing” extension.

Installation with Composer
composer require friendsoftypo3/frontend-editing

Schritt 2. Statische Vorlage einbinden

Weiter zu TYPO3 Backend > Template > Root page > Include Static Template “Frontend Editing (frontend_editing).

Schritt 3. Frontend-Bearbeitung einschalten

Sie können die Frontend-Bearbeitung mit einer der folgenden Optionen aktivieren oder deaktivieren.

 

// Option 1. Enable with TypoScript
config.frontend_editing = 1

 

// Option 2. Enable with User TSconfig
setup.override.tx_frontend_editing_enable = 1

Schritt 4. Benutzerdefinierte Frontend-Bearbeitung aktivieren

Sie können auch die Frontend-Bearbeitungsfunktion für jeden TYPO3-Backend-Benutzer aktivieren/deaktivieren. Login with your account, Go to User Settings from the top panel.

Tipps

  • If your TYPO3 site running on sub-folder, then consider to configure baseURL plugin.tx_frontendediting.baseUrl = /
  • If you are using TYPO3 v9, then make sure to include “Editable Fluid Styled Content v9”.

Schritt 5. Erstes Einprägen der coolen TYPO3-Frontend-Bearbeitung

Woohoo! Gehen Sie einfach auf Ihre TYPO3-Frontend-Site und Sie werden tolle TYPO3-Frontend-Editing-Panels sehen können. Öffnen Sie die oberen, linken und rechten Frontend-Bearbeitungswerkzeuge und spielen Sie damit herum.

Schritt 6. Live TYPO3 Frontend Inline-Bearbeitung

Erleben Sie die Live-Bearbeitung des TYPO3-Frontends, zumindest für das Standard-Element des TYPO3-core wird es gut funktionieren ;)

Da es für Ihre benutzerdefinierten TYPO3-Templates und -Elemente nicht funktionieren wird, müssen Sie speziellen Code schreiben, um ein "Inline-Editing" zu ermöglichen. Lesen Sie die offizielle Dokumentation für ein solches benutzerdefiniertes TYPO3-Element-Level-Editing.

CSS-gestalteter Inhalt

Die gute Nachricht: Wenn Ihre TYPO3-Site (noch) mit css_styled_content läuft, dann müssen Sie keine einzige Änderung an Ihren TYPO3-Templates vornehmen. Es gilt: Alt ist Gold in TYPO3! ;)

Fluid Styled Content

Wenn Sie fluid_styled_content verwenden, dann müssen Sie einige Anpassungen vornehmen. Bitte stellen Sie sicher, dass Sie "Editable Fluid Styled Content v9" für die fluid_styled_content TYPO3-Site einbinden. Dadurch wird die Bearbeitung der TYPO3-Kernelemente im Frontend ermöglicht.

IMHO: Maybe this is the main reason why this feature is still not in the TYPO3 core. As TYPO3 integrators hate frontend_editing because it hurts lots to write extra code to make it compatible with the extension. Team TYPO3 frontend editing should seriously think and solve it.

Vielen Dank für das Lesen meines TYPO3-Blogs. Ich hoffe, es hat Ihnen gefallen und Sie haben sich gut über die TYPO3-Frontend-Bearbeitung informiert.

Jetzt ist es an der Zeit, Ihre TYPO3-customers zu beeindrucken, indem Sie TYPO3-Frontend-Editing ausprobieren, indem Sie entweder klassische (EXT:feedit) oder moderne (EXT:fronend_editing) TYPO3-Frontend-Editing-Erweiterungen wählen. Und drücken Sie die Daumen, dass der TYPO3-core eines Tages die "awesome frontend editing experience" eingebaut hat ;)

Was sind Ihre Gedanken dazu? Oder sind Sie bei der Implementierung der oben genannten Funktionen auf Probleme gestoßen? Ich beantworte gerne alle Fragen im Kommentarfeld unten.

Viel Spaß bei der TYPO3 Frontend-Bearbeitung!

Would you prefer a Ready-made template(s) or a Custom one for TYPO3?

  • 200+Developed custom TYPO3 extensions
  • 90+ Score on TYPO3 SEO, speed & accessibility
  • 70+ Published free & premium TYPO3 extensions
  • 13+Years of TYPO3 experience
  • 5+Bestseller TYPO3 extensions (T3AI, Slider Revolution)
TYPO3 Extension Gig
Extension

Post a Comment

×
Captcha Code Kann das Bild nicht gelesen werden? Klicken Sie hier, um zu aktualisieren
  • user
    Dan Riesen 2020-12-11 um 3:06 pm
    Hi Sanjay,
    Thank you so much for this article. Looks a little bit like neos, the modern (EXT:fronend_editing) way you write about. I am old school but still think that there is a difference between style and content and no need to see the layout when texting especially if you do a lots of SEO. To edit in «design mode» is just a distraction. People you like to do so should happily use wix or some other sites. It is not the aim to provide such services. Would make Typo3 too commercial. Just my oppinion but that is the way we see it at our Web agency ALOCO.
    But let's keep up with the disscusion.
    Cheers Dan
    http://aloco.ch/webdesign
    • user
      Sanjay Chauhan 2020-12-12 um 6:23 am
      Hey Dan,

      Thanks for your appreciation. It keeps motivating us. Indeed, EXT:frontend_editing is looking like Neos.

      I respect your feedback about design-mode vs editor-mode and I'm sure TYPO3 people will find the best solutions. But, my friend, it's not about to make "TYPO3 commercial". It's not about TYPO3 vs Wix, but we should consider TYPO3 vs WordPress, because according to t3versions.com fact statistics, most TYPO3 sites are migrating to WordPress).

      Web-CMS is not same as before 10 years ago, we (TYPO3) should update our-self to provide best editor-level experience. Take an example of "WordPress Gutenberg", how they smartly integrated editing-experience (both frontend & backend). We should have such initiatives to spread & grow TYPO3 to the world.

      Cheers,
      Sanjay