TYPO3-Seiten mit Frontend-Editing pflegen

Tags: , , , ,

 

Frontend-Editing ist praktisch, vermittelt es doch dem nicht so webaffinen Redakteur das Gefühl, den Inhalt genau unter Kontrolle zu haben. Der Komfort läßt sich noch steigern, wenn er sich mit seinem FE-User-Passwort auch gleich zur Seitenpflege anmelden kann. Außerdem läßt sich das Aussehen des Edit-Panels, mit dem der Redakteur arbeitet, gefälliger und unaufdringlicher gestalten - auch ein Beitrag zur besseren Arbeitsumgebung.

Die User

Wir legen FE-User, BE-User und eine BE-Usergruppe datenpflege

Frontend-Editing einschalten

  • Die BE-Usergruppe datenpflege
    admPanel {
    #Frontend-Editieren freigeben
    enable.edit = 1
    #Buttons einblenden
    override.edit.displayIcons = 1
    #Admin-Panel abschalten
    hide = 1
    }
  • Im Template-Setup wird das Frontend-Editing grundsätzlich freigeschaltet:
    page.config.admPanel = 1
  • Damit der Redakteur vom Frontend auch auf die gesamte Seite, nicht nur auf die einzelnen Inhalte zugreifen kann, bauen wir eine Instanz des Edit-Panels für Seiten im Template ein:
    page {
    marks.INHALT.10 < styles.content.editPanelPage
    marks.INHALT.20 < styles.content.get
    }

Frontend-Editing konfigurieren

Die Buttonleisten des Edit-Panels sind keine ästhetische Freude und stören den Überblick über die Seite. Ist eine Content-Spalte zu schmal, kann ihr Label (enthält die Überschrift einer Seite oder eines Inhaltselements) auch schon einmal das ganze Layout sprengen. Hier ist also weniger mehr - wir schalten Überflüssiges ab.

  • tt_content.stdWrap.editPanel.label =
    # Label entfernen
    tt_content.stdWrap.editPanel.line = 0
    # Linie unterhalb des Edit-Panels enfernen
    styles.content.editPanelPage {
    10 = EDITPANEL
    10 {
    label.data =
    label.wrap =
    }
    }
    # schaltet das Label für das seiten-Editpanel aus
  • Die Tabelle, die das Edit-Panel enthält, ist hartcodiert. Am einfachsten formatiert man sie deshalb per CSS:
    table.typo3-editPanel {
       border: none; background-color: #fff; width: auto;
    }
    table.typo3-editPanel TD.typo3-editPanel-controls {
       border: 1px solid #ccc; background-color: #fff;
    }

Frontend-User einen Backend-User zuweisen

Damit sich jetzt Mitglieder einfach mit ihrem FE-Login anmelden und doch editieren können, setzt man die Extension <a"typo3-extension: href="http://typo3.org/extensions/repository/view/simulatebe/1.0.0/" target="_blank"></a"typo3-extension:>simulatebe<//a> ein. Sie ermöglicht die Verbindung eines FE-Users mit einem BE-User, auf dessen Rechte und Gruppenrechte er dann zugreifen kann.

  • simulatebe im Extension Manager importieren und installieren.
  • Im Template einbinden:
    page.headerData.40 < plugin.tx_simulatebe_pi1
  • Unsere FE-User feuser1, beuser1, feuser2, beuser2, related backend user
  • Fertig!

Vorsicht, dynamisch!

Neben harmlosem Content gibt es aber immer Seiten, die ein Plugin wie z.B. ein Wiki enthalten. Damit der forsche Redakteur nicht versehentlich solche Seiten löscht, sperren wir sie einfach, indem wir ihre Rechte auf admin setzen und die Gruppe entfernen.