PageTree démo by

Éditer des pages

Édition sur le site

Depuis la 2.4, vous pouvez modifier une page directement sur le site : textes en place, blocs déplacés, masqués ou supprimés, formulaire d’un bloc dans un panneau latéral. Tout est enregistré en une seule fois.

Qui peut éditer

  • Les administrateurs connectés au back-office qui ont la permission Gérer les pages de blocs. Voir Permissions et réglages.
  • Seules les pages PageTree sont concernées : les pages CMS de votre thème ne changent pas.
  • Les visiteurs ne reçoivent jamais le mode édition : ni bouton, ni script, ni balisage supplémentaire. Leur page est identique à celle d’avant la 2.4.

Passer en mode édition

  1. Connectez-vous au back-office, puis ouvrez une page PageTree sur le site, par exemple avec Ouvrir la page dans l’éditeur.
  2. Cliquez sur Modifier la page, en bas de la fenêtre.
  3. La page se recharge en Mode édition : un cadre entoure la fenêtre et une barre d’actions apparaît en bas.

Le mode édition est activé pour cette page seulement : les autres pages du site restent affichées comme pour les visiteurs, avec le bouton Modifier la page. Quitter l’édition revient à la page normale.

Modifier un texte en place

  • Au survol, les textes modifiables sont soulignés en pointillés. Cliquez dessus pour les modifier.
  • Entrée valide, Échap annule. Dans un texte sur plusieurs lignes (sous-titre, citation…), Maj+Entrée ajoute un retour à la ligne.
  • Cliquer ailleurs valide aussi la modification.

Les blocs intégrés rendent modifiables leurs titres, textes, boutons et légendes. Les autres champs (images, liens, réglages) se modifient dans le formulaire du bloc. Les blocs personnalisés et vos propres blocs peuvent aussi rendre leurs champs modifiables : voir Pour les développeurs.

La barre d’outils d’un bloc

Survolez un bloc pour afficher sa barre d’outils :

BoutonAction
Sélectionner le bloc parentPour un bloc placé dans une Section ou une grille, sélectionne le bloc qui le contient.
Monter ce bloc / Descendre ce blocDéplace le bloc d’un cran.
Modifier ce blocOuvre son formulaire dans le panneau latéral.
Masquer ce bloc / Afficher ce blocÉquivaut à la case Affiché ? : un bloc masqué reste visible et grisé en mode édition, mais pas pour les visiteurs.
Dupliquer ce blocAjoute une copie juste après.
Supprimer ce blocSupprime le bloc après confirmation. Annuler le récupère tant que la page n’est pas enregistrée.

Le formulaire d’un bloc

  1. Cliquez sur Modifier ce bloc. Le panneau Modifier le bloc s’ouvre à droite avec le même formulaire que dans l’éditeur.
  2. Modifiez les champs : la page se met à jour au fur et à mesure.
  3. Rétablir le bloc remet les valeurs que le bloc avait à l’ouverture du panneau. Fermez le panneau quand vous avez terminé.

Le panneau peut être épinglé à côté de la page : la page se réduit pour lui laisser la place. Sa largeur se règle en faisant glisser son bord.

La barre d’actions

  • Annuler / Rétablir (Ctrl+Z, Ctrl+Y) : reviennent sur les modifications non enregistrées.
  • Enregistrer (Ctrl+S) : publie toutes les modifications en une fois. Annuler les modifications les abandonne.
  • Historique : liste les versions de la page, comme dans l’éditeur. Voir ci-dessous.
  • Aperçu responsive : affiche la page en largeur ordinateur, tablette ou mobile.
  • Langue : avec RainLab.Translate et plusieurs langues, choisit la langue modifiée.
  • Ouvrir dans l’éditeur : ouvre la page dans l’éditeur du back-office, dans un nouvel onglet.
  • Quitter l’édition : revient à la page normale. Si des modifications ne sont pas enregistrées, une confirmation vous prévient.

Tant que vous n’avez pas cliqué sur Enregistrer, rien n’est publié : les visiteurs voient toujours la page enregistrée.

Enregistrer

  • Chaque enregistrement crée une version dans l’historique, comme un enregistrement depuis l’éditeur.
  • Si la page a été modifiée ailleurs (dans l’éditeur ou par un autre administrateur) depuis que vous l’avez ouverte, l’enregistrement est refusé pour ne pas écraser ces changements. Rechargez la page, puis refaites vos modifications.
  • Le titre, l’URL, le layout, la publication et le SEO ne se modifient pas sur le site : utilisez l’éditeur.

Historique sur le site

  1. Cliquez sur Historique dans la barre d’actions : les versions s’affichent dans le panneau latéral.
  2. Prévisualisez une version : ses blocs remplacent ceux de la page et la version est marquée En aperçu.
  3. Enregistrer remet cette version en ligne (comme nouvelle version). Revenir à la version actuelle quitte l’aperçu.

Pages inactives, non publiées ou programmées

Les administrateurs qui peuvent éditer les pages ouvrent aussi sur le site les pages inactives, non publiées ou programmées. Un bandeau indique leur statut : « Visible uniquement par les éditeurs : les visiteurs obtiennent une erreur 404. »

Pour voir le site comme un visiteur, utilisez une fenêtre de navigation privée ou déconnectez-vous du back-office.

Les pages servies à un éditeur ne sont jamais mises en cache par le navigateur ni par un proxy. Celles des visiteurs ne changent pas.

Liens dans la page

En mode édition, comme dans l’aperçu de l’éditeur, les liens de la page sont désactivés pour éviter de quitter la page par erreur en cliquant sur un texte. Un message le rappelle. Quittez l’édition pour naviguer.

Pour les développeurs

Pour qu’un champ de votre bloc soit modifiable en place, affichez-le avec le filtre Twig pagetreeEditable et le nom du champ :

<h2>{{ data.title|pagetreeEditable('title') }}</h2>
<p>{{ data.text|pagetreeEditable('text', 'multiline') }}</p>
<div>{{ data.content|pagetreeEditable('content', 'html') }}</div>
ModeAffichage équivalentPour
text (par défaut){{ value }}Texte sur une ligne
multiline{{ value|e|nl2br }}Zone de texte
html{{ value|raw }}Texte enrichi
  • Le filtre échappe la valeur exactement comme l’affichage équivalent. Il n’ajoute un marqueur qu’en mode édition et dans l’aperçu de l’éditeur : les visiteurs reçoivent le même HTML que sans le filtre.
  • Le filtre fonctionne dans les templates des blocs en PHP et dans ceux des blocs personnalisés.
  • Sans le filtre, un bloc fonctionne comme avant : il se modifie par son formulaire.