L’édition frontale avec TYPO3 4.3
Alors que la version bêta 3 est sortie y’a quelques jours et que j’étais en train de rédiger ce billet sur l’extension d’édition frontale, la version RC1 est sortie entre temps. Quant à la version finale, elle est prévue pour samedi, bref, tout ça pour vous dire que ça va très vite.
Tellement vite que dans la version RC1, on nous indique même que l’extension que je vous présente dans ce billet a été déplacée dans le TER et ne sera pas livrée dans les sources de TYPO3. Ça ne m’étonne pas, vu que je m’étais empressé de rédiger ce billet et mettre en avant les nombreux bogues que cette extension contient. Je comprends maintenant pourquoi l’équipe du core a décidé de ne pas la livrer avec la version finale.
Voyons malgré tout ce que cette extension nous offre :
Tout d’abord, vous devez vous assurez d’avoir activé l’extension « feeditadvanced » qui est disponible de base avec les sources (maintenant vous devez la télécharger sur le TER ici : http://typo3.org/extensions/repository/view/feeditadvanced/current/ ) .L’autre extension nommée « feedit » ne sert qu’à activer l’ancien mode que l’on connaissait depuis toujours. Si cette dernière n’est pas active, vous pouvez quand même utiliser le panneau d’administrateur, c’est juste que les fonctions d’édition en ligne ne s’afficheront pas, mais vous pourrez profiter des autres options utiles du panneau d’administrateur
Bref, en fouillant dans les fichiers de l’extension qui nous intéressent (feeditadvanced) j’ai découvert la configuration qui m’intéressait à savoir le code utile pour faire fonctionner toutes les options d’éditions frontales. Car contrairement à ce que nous connaissions, vous n’avez aucune ligne de code TypoScript ou TSConfig à mettre dans votre site après l’activation de cette nouvelle extension, elle contient déjà sa propre configuration de base.
Je dirais même, vous n’avez pas à utiliser le code TypoScript suivant :
config.admPanel = 1
Qui permets d’activer l’ancien panneau d’administrateur et n’a rien avoir avec ce que je vais vous présenter ci-dessous
Du côté du TSConfig de page :
Nous avons un nouvel objet « FeEdit » qui permet de configurer l’éditeur du coté frontal. Voici les options disponibles (les faire précéder du mot FeEdit)
# Permet de désactiver l'éditeur qui est actif par défaut disable = 0
Voici une capture de l’éditeur quand il est actif (pour ceux qui étaient présents lors du T3UNI09, vous remarquerez que je fais mes tests sur le site de cours utilisé à cette époque)
# J'ai changé cette valeur à zéro, mais ça n'a rien changé useAjax = 1
Comme son nom l’indique, si on active cette option on peut éditer les différentes zones de contenu en cliquant tout simplement dans la zone. Par défaut cette option est désactivée, car j’imagine qu’elle rentre en conflit avec le clic sur les liens du dit contenu…logique
clickContentToEdit = 0
Voici une option qui ne doit pas être encore finalisée,car a priori elle permet d’avoir un contrôle sur les différentes icônes disponibles pour chaque contenu, notamment lorsqu’on passe la souris sur un des blocs. J’ai changé l’ordre de quelques valeurs et ça semble avoir de l’effet, mais pas pour toutes les options. Exemple avec EDIT ça fonctionne, mais pas avec DRAGGABLE. Les autres options « copy, cut » ne sont pas visibles sur le site (en cours de développement ?)
showIcons = edit, new, copy, cut, hide, delete, draggable
Cette option permet de changer les boutons disponibles en haut à gauche de la page, notamment pour permettre d’éditer les propriétés de la page courante, ainsi que de créer une nouvelle page (au même niveau). Vous pouvez supprimer une option, mais a priori ne pas les inverser (il existe un gabarit HTML au cas ou vous souhaiteriez le faire).
showPageIcons = edit, new, delete, hide
Voici des options propres au rendu visuel (thème)
skin {
## On peut préciser une autre feuille de style que celle par défaut
cssFile = EXT:feeditadvanced/res/css/fe_edit_advanced.css
## Même chose ici avec le gabarit général html
templateFile = EXT:feeditadvanced/res/template/feedit.tmpl
Si vous regardez dans le répertoire RES de l’extension, il existe plusieurs autres feuilles de style et gabarit html, reste a savoir comment on peut les charger.
## Cette option n'a rien changé dans mes tests imageType = GIF }
Je ne vois pas non plus à quoi peut correspondent ces options, elles ne sont sans doute pas encore activées
menuBar {
config = action, type, clipboard, context
typeMenu = text, header, image, html
contextMenu = close
}
}
Voyons à présent du côté du TSConfig des utilisateurs :
On retrouve ici l’objet utilisé dans le passé
admPanel {
Changer cette valeur n’a rien modifié sur le site !
display_preview = 0
Tout comme la configuration du panneau d’édition, voici une option qui doit permettre d’activer les options de prévisualisation
override.preview = 1
Avec cette option, vous pouvez désactiver le panneau pour un groupe précis par exemple
override.edit.displayIcons = 1
Sans doute pour afficher les contenus et les pages cachés sur le site ?
override.preview.showHiddenRecords = 1 override.preview.showHiddenPages = 1 }
Du côté du code, on y trouve aussi du TypoScript que je vous laisse découvrir ici :
styles.content.get.stdWrap {
prepend = TEXT
prepend.value = 0
prepend.dataWrap = |-pages-{TSFE:id}
prepend.wrap3 = <div class="feEditAdvanced-firstWrapper"
id="feEditAdvanced-firstWrapper-colPos-|"></div>
}
styles.content.getLeft.stdWrap < styles.content.get.stdWrap
styles.content.getLeft.stdWrap.prepend.value = 1
styles.content.getRight.stdWrap < styles.content.get.stdWrap
styles.content.getRight.stdWrap.prepend.value = 2
styles.content.getBorder.stdWrap < styles.content.get.stdWrap
styles.content.getBorder.stdWrap.prepend.value = 3
styles.content.getNews.stdWrap < styles.content.get.stdWrap
styles.content.getNews.stdWrap.prepend.value = news
', 43); // add this code AFTER the "css_styled_content" code (43)
(because CSC empties styles > and would delete our changes)
Ce code est la pour ajouter des DIV autour des contenus et ainsi permettre le glisser-déplacer d’une colonne à l’autre.
Bon comme vous le voyez l’extension nous indique quand même un peu de configuration, sans avoir à consulter aucune documentation. Mais si on veut aller plus loin, il serait intéressant de mettre la main sur la documentation, non ? (Y’a rien ici en tout cas : http://forge.typo3.org/wiki/typo3v4-feedit)
Et enfin pour terminer, comme je l’indiquais dans l’introduction, j’ai découvert beaucoup de dysfonctionnement avec cette extension qui fait en sorte que je ne la vois guère utilisable dans un site en production. Peut-être que cela s’explique parce que je l’ai utilisé avec TemplaVoilà ?
Voici une liste de quelques bogues :
J’ai donc de gros doutes concernant une certaine stabilité lors de la sortie de TYPO3 4.3 (vous voyez bien je le disais avant même que l’équipe du core l’annonce ah ah ah). Certes l’extension ne fait pas planter le site, mais beaucoup des actions ne semblent actives. C’est comme s’ils avaient pris le code disponible dans le backend et l’avaient chargé sur le frontend sans vérifier le fonctionnement.
Exemples :
- Éditer les propriétés d’une page de type « Standard » et tenter de la passer en type « raccourci » et vous êtes sûr de faire planter la fenêtre d’édition, car le changement de type ne se fait pas toujours. Qui plus est, lors d’un changement sur le site frontal, il semblerait que l’on ne puisse pas revenir en arrière comme on le fait dans le « backend »
- Les options permettant de déplacer les blocs de contenu en dessous ou au dessus d’un contenu ne sont pas toujours disponibles (surtout après un glisser-déplacer d’une colonne à l’autre)
- La nouvelle fonctionnalité de TYPO3 4.3 qui consiste à sélectionner un enregistrement à travers un champ de type « Ajax » au lieu de cliquer sur la petite icône « dossier » ne fonctionne pas.
- On ne peut pas changer de gabarit TemplaVoilà dans les propriétés d’une page
- J’ai également tenté de cacher certains types de contenu en émulant un utilisateur avec des droits limités, mais ça ne fonctionnait pas
Mais mis à part ces quelques exemples, le reste est assez fonctionnel (déplacer du contenu, éditer, cacher, créer de nouvelle page, …)
Du côté des extensions ?
J’ai voulu tester avec une liste de nouvelles afin de voir si l’on pouvait éditer des nouvelles directement, mais a priori ça n’est pas encore disponible. J’imagine que quand l’extension sera stable, plusieurs développeurs pourront appeler l’API pour ajouter leur propre bouton d’édition, de déplacement, etc..
Avant de terminer, voici une capture d’écran quand vous cacher manuellement toutes les options en cliquant sur le bouton CLOSE.
En parlant du bouton CLOSE, j’ai fait la traduction du fichier de langue et le bouton CLOSE apparaît toujours en anglais :
Voilà donc ce qui conclut le test de cette extension qui comme vous l’avez compris ne sera pas livré avec la version 4.3 de TYPO3, il faudra peut-être attendre la version 4.4 ou une version intermédiaire.
PS : J’ai hâte de vous faire un dernier billet sur la version RC1/Finale, car y’a pas mal de petits correctifs intéressants ici : https://svn.typo3.org/TYPO3v4/Core/tags/TYPO3_4-3-0RC1/ChangeLog
Catégorie(s) : CMS/SGC
Tag(s) : frontend editing, TYPO3 4.3






















Salut king76,
Juste pour ton information, « display_preview = 0″ sert à activer (ou non) l’apparition d’une notice en frontend, sur fond rouge situpulant dans quel workspace tu te trouve (Preview Workspace -1).
++
Cool ca… je me demandais pourquoi j’avais PREVIEW toujours en plein milieu de la face lol
Sinon, je cherche a afficher quand un utilisateur est en train d’éditer un contenu, comme on peut le voir du coté du backend.. Dans le fichier de langue ca semble être prévu.. si quelqu’un a trouver cela !
[...] L’édition frontale avec TYPO3 4.3 | Le blogue d’Infoglobe, des nouvelles du Qu&ea… [...]
[...] Intégration de l’édition frontend avancé sous la forme d’une extension disponible sur le TER : on peut consulter un article très détaillé sur infoglobe ici (encore merci à lui) [...]
[...] Intégration de l’édition frontend avancé sous la forme d’une extension disponible sur le TER : on peut consulter un article très détaillé sur infoglobe ici (encore merci à lui) [...]