TYPO3 offre depuis plusieurs années la possibilité de modifier le contenu d'un site depuis le front office. Pour que cette édition soit possible, il faut d'abord être authentifié sur le back office. Ensuite, lorsque l'utilisateur navigue sur le front office, TYPO3 lui offre la possibilité de d'éditer les différents éléments de contenus posés sur une page grâce à l'ajout de petits crayons devant chaque bloc.

Un clic sur un crayon ouvre un popup contenant un masque de saisie avec les données à modifier ou bien redirige l'utilisateur vers le back office. L'avantage de cette méthode, c'est qu'elle permet à un utilisateur de repérer facilement les éléments modifiables sur une page mais le rendu n'est pas très "web 2.0" !

Depuis la version 4.3, une nouvelle extension développée par Jeff Segars est apparue. Elle révolutionne l'édition front office car elle intègre l'Ajax. Le site passe en arrière plan et les informations d'administration passent au premier plan sous forme de lightbox.

Ainsi, une barre d'outil est disponible en haut de la page. Elle offre des options très pratique pour administrer le site. Ces options peuvent différer en fonction des droits de l'utilisateur bien évidemment.

Voici les actions disponibles :

Propriétés : permet d'afficher et de modifier les informations sur la page actuelle (titre, sous-titre, balises meta keywords et description, récriture de la page ...)

Dans le formulaire suivant, nous avons modifié les balises meta. Un petit rectangle marron indique que les champs ont été modifiés.

Une fois les modifications apportées, vous pouvez enregistrer et ferme la zone de saisie.

Créer page :

Comme son nom l'indique, l'option permet de créer un type de page parmi "Standard", "Dossier système", "Raccourci", "Lien vers une URL externe"...

En dessous de la barre noire, une seconde barre horizontale laisse apparaitre les éléments de contenu que vous pouvez créer. Pour créer un nouvel élément, cliquez sur l'élément souhaité puis, sans relacher le clic, déplacer l'élément à l'endroit souhaité.

Le formulaire apparait au premier plan, comme pour une lightbox avec le site en arrière plan :

Cliquez sur "Enregistrer et fermer" pour quitter le mode de création. L'élément a été créé avec succès !

En ce qui concerne les éléments déjà présents sur la page, le survol du pointeur de la souris laisse apparaitre autour de chaque bloc les options disponibles :

L'autosuggestion est disponible dans certains formulaires du back office :

Le "t3editor" est un éditeur de code typoscript qui propose une coloration syntaxique, la complétion de code et l'affichage de définitions pour le langage interne de TYPO3 : le typoscript.