L’édition frontend existe nativement sous Typo3, cette fonctionnalité est toutefois désactivée par défaut. Il faut donc activer l’extension native feedit dans le gestionnaire d’extensions si ce n’est pas le cas.
Notez que cette extension se limite à proposer l’affichage des formulaires d’édition de contenu directement depuis le frontend du site. Il n’y a pas de possibilité d’édition directement dans le texte du site, d’éditer certains types d’enregistrement ou encore de glisser-déposer un élément.
Des extensions existent pour étendre ces fonctionnalités mais restent à utiliser avec précautions, par exemple :
- Advanced Frontend Editing, qui fonctionne pour typo3 entre 4.3 et 6.0 mais qui prend mal en compte le nouveau système de fichier, FAL, adopté depuis Typo3 6.0
- FE-editing with Aloha qui à l’heure actuel n’est qu’a ça version 0.2.0 mais qui est lui fait pour typo3 6 et supérieur, à surveiller donc.
Les étapes pour configurer l’édition frontend dans typo3
Sources : Wiki typo3
1. Autoriser le panneau d’administration (Admin Panel)
Afin de pouvoir utiliser le panneau d’administration, il faut autoriser son affichage dans le typoscript de votre site.
Ajoutez ces lignes dans le SETUP de votre Template typoscript.
[ts]
// Show admin panel
config.admPanel = 1
[/ts]
[tsref:config]
2. Créer le groupe d’utilisateur autorisé à éditer le contenu en frontend
Tous les utilisateurs de ce groupe auront accès à l’édition frontend. Le plus simple pour créer un groupe est de passer par l’édition d’un utilisateur et de cliquer sur le lien « créer un groupe » du champ « groupe » (le 
). 
Configurer le panneau d’administration
Dans le champ TSConfig du formulaire du groupe, entrez la configuration souhaitée pour le panneau d’administration.
Une configuration minimum serait par exemple :
[ts]
admPanel {
#affiche le panneau
hide = 0
#active la partie édition
enable.edit = 1
#configure la partie édition
module.edit.forceNoPopup = 0
module.edit.forceDisplayFieldIcons = 1
module.edit.forceDisplayIcons = 0
}
[/ts]
[beuser:admPanel]
Notez que : Les propriétés typoscript forceNoPopup, forceDisplayFieldIcons et forceDisplayIcons permettent de forcer l’activation des paramètres « Pas de fenêtre popup », « Afficher les icônes d’édition » et « afficher les panneaux d’édition » quelque soit les cases cochées par l’utilisateur sur le panneau d’administration
Un autre module intéressant pour l’édition frontend est le module de prévisualisation. Il permet notamment aux utilisateurs de visualiser les contenus et les pages masqués. Une application pratique : Préparer les contenus sans qu’ils ne soient visible sur le site par les visiteurs.
Pour activer ce module il suffit de rajouter au TSConfig du groupe les lignes suivantes :
[ts]
admPanel {
#active la partie prévisualisation
enable.preview = 1
}
[/ts]
Pour plus d’information référez vous à la documentation TSConfig
Gérer les droits du groupe
- Choisissez les éléments modifiables par les membres du groupes. Dans l’onglet « Liste d’accès » cochez la case « Inclure les listes d’accès », dans un premier temps autorisez tous les éléments pour vérifier que l’édition frontend fonctionne correctement. Vous pourrez gérez les droits plus finement par la suite.
- Ajoutez la racine du site dans le champ « Montages de BDD » (onglet « Montages et Espaces de travail »).
- Sélectionnez le point de montages des fichiers dans le champ « Montages des fichiers » (onglet « Montages et Espaces de travail »). Les utilisateurs du groupe n’auront alors accès qu’aux fichiers et sous-dossiers de ce dossier.
3. Gérer les accès aux pages du site
Dans le module « Web > Accès » Sélectionnez la page d’accueil du site et « Modifier ses permissions » 
- Choisir l’administrateur comme propriétaire de la page
- Choisir le groupe que l’on vient de créer
- Sélectionner les permissions du groupe (éditer le contenu, éditer la page , …)
- Sélectionner une application récursive sur le maximum de niveaux (pour modifier les droits de toutes les pages en même temps)
4. Ajouter la redirection vers le frontend sur le formulaire de connexion
Pour effectuer cette opération, il faut se rendre dans le module « OUTILS D’ADMINISTRATION > Installation » et déverrouiller l’outil d’installation (mot de passe créer lors de l’installation de typo3).
Ensuite dans la section « All configuration » recherchez la variable [BE][interfaces] et changez sa valeur pour « frontend » ou « frontend, backend ».
Dans le premier cas lors de la connexion les utilisateur backend seront automatiquement redirigé vers le site (pour atteindre le backend il faudra retaper l’url de celui-ci ou cliquer sur le lien du panneau d’administration si il est disponible). Dans le second cas l’utilisateur pourra choisir à l’aide d’une selectbox vers où il sera redirigé après sa connexion.
Activer l’édition frontend pour des extensions tierces. L’expemple de tt_news
Une fois l’édition frontend activée sur typo3, il est possible d’éditer tous les éléments de type « contenu » depuis le site… Oui mais voila les extensions tierces sous typo3 sont gérées à l’aide d’un élément de type « contenu » nommé plugin qui lui affiche un ou des éléments de type « enregistrement ».
En gros du point de vu de typo3 l’élément de contenu est donc le plugin de l’extension et tel quel l’édition frontend permet donc de modifier les options du plugin plutôt que d’éditer les éléments affichés.
Ceci n’est a priori pas le fonctionnement recherché, heureusement pour la plupart des extensions quelques réglages typoscript, ou la création de pages spécifiques, suffisent à y remédier. Je dis pour la plupart, parce qu’évidemment je n’ai pas tout testé, mais disons que pour les extensions les plus populaires, c’est généralement prévu et documenté sur la toile.
Prenons l’exemple de tt_news.
Avec les réglages présentés ci-dessus, les icônes d’éditions sont bien présentent pour le plugin tt_news, mais, lorsque l’on clique sur éditer, on se retrouve avec le formulaire correspondant au plugin tt_news. 
.
L’idée est en fait de rajouter un panneau d’édition pour chaque enregistrement tt_news à l’intérieur du plugin tt_news, pour cela, il suffit de rajouter quelques lignes à votre template typoscript dans la partie SETUP. Par exemple :
[ts]
# Active le panneau d’édition pour chaque élément tt_news
plugin.tt_news.general_stdWrap.editPanel = 1
plugin.tt_news.general_stdWrap.editPanel{
# Affiche les icones éditer, nouvel élément, masquer
allow = edit, new, hide
# Affiche comme titre "tt_news record : " + le titre de l’enregistrement
label = tt_news record : %s
# Défini l’Id de la page sur laquelle enregistrer les nouveaux éléments
newRecordInPid = 230
}
[/ts]
[tsref:(cObject).EDITPANEL]
Pour plus d’information sur les paramètres du panneau d’administration référez vous à la documentation
Le même principe peut à priori s’appliquer à toutes les extensions en adaptant les propriétés typoscript : La propriété general_stdWrap est propre à tt_news et correspond au bloc contenant l’ensemble des informations de la news (titre, description, …), mais toutes les propriétés typoscript munies d’une fonction stdWrap font l’affaire.
Par exemple, pour rattacher le panneau d’édition aux titres des news et uniquement dans la vue « détail » de la news, on aurait pu placer le code suivant dans le template typoscript :
[ts]
plugin.tt_news.displaySingle.title_stdWrap.editPanel = 1
plugin.tt_news.displaySingle.title_stdWrap.editPanel{
allow = edit, hide
}
[/ts]
Et enfin …
Une fois que vous avez rattaché le panneau d’édition à tous les éléments qui doivent être modifiables, il ne vous reste plus qu’à tester tous ça et à affiner le réglages du groupe (onglet « Liste d’accès »). Pour ce faire je vous conseille de créer un utilisateur membre de ce groupe et n’ayant pas la case « administrateur(!) » . En effet si cette case est cochée, le comportement de tous ce qui concerne les droits d’accès change.
Par exemple, il est possible d’interdire l’édition des contenus de types plugin à ce groupe pour éviter que vos rédacteur ne modifient vos réglages, sachant évidement qu’ils gardent accès aux éléments affichés dans le plugin (si les paramétrages précédents sont bien fait).
Ou encore de leur interdire la modification de certains champs en particulier, comme le type de titre pour les contenus text pour forcer l’utilisation du type par défaut.
