Les crayons

Un plugin pour une édition directe sur le site public

Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

Le paramétrage côté squelettes est des plus simples : il repose sur la classe #EDIT{...} adjointe aux éléments qu’on veut rendre modifiables.

Résumé

Après l’activation du plugin, les contenus peuvent être directement édités « en place » sur les pages publiques du site, par les personnes autorisées.

Cela demande de préparer vos squelettes pour les rendre compatibles avec ce plugin (à noter : c’est le cas de la plupart des squelettes distribués sur SPIP-Contrib). Le principe est simple : un bloc est éditable s’il contient la classe crayon objet-champ-id. Une balise #EDIT{} facilite encore l’écriture. En fait, pour permettre d’éditer le titre d’un article, il suffit de remplacer dans le squelette de la page article.html, la ligne (par exemple) :

<h1>#TITRE</h1>

par :

<h1 class="crayon article-titre-#ID_ARTICLE">#TITRE</h1>

ou encore, plus simplement :

<h1 class="#EDIT{titre}">#TITRE</h1>

Autre exemple, pour rendre « crayonnable » le texte d’un article, transformer :

[<div class="texte">(#TEXTE|image_reduire{520,0})</div>]

en :

[<div class="#EDIT{texte} texte">(#TEXTE|image_reduire{520,0})</div>]

Les pages concernées doivent obligatoirement comporter une balise </head>, écrit précisément de cette façon (lettres minuscules).

Fonctionnement

Fabrication de la page côté serveur

Lors du chargement d’une page, le plugin agit dans le pipeline affichage_final.

Il vérifie alors :

  • si l’utilisateur est identifié
  • si la page contient au moins une chaîne de caractères “crayon xxxx­-yyyy-nn”,
  • et si l’utilisateur possède des droits sur au moins un des éléments ainsi marqués

Le cas échéant, il insère dans le <head> de la page le script externe crayons.js ainsi que des données de configuration ; le script s’exécute à la fin du chargement de la page, et vérifie à intervalles réguliers si de nouveaux crayons sont disponibles, de façon à les activer en cas de besoin.


Chargement par le navigateur

Lorsque la page finit de se charger (et si le visiteur a des droits d’édition sur les crayons présents dans la page), le script crayons.js sélectionne tous les éléments possédant la classe crayon type­-champ-id, et si ils sont autorisés pour l’utilisateur inscrit, leur adjoint une image clicable (un crayon) et leur ajoute la classe crayon-autorise pour indiquer qu’ils sont « éditables ».

Un clic sur cette image, mais aussi un double-clic sur l’élément lui-même, provoquent l’activation du formulaire d’édition.


Activation du crayon

Un click sur le « crayon » (ou un double-clic sur l’élément) déclenche une requête vers le serveur, qui renvoie le formulaire de modification qui va « remplacer » l’élément affiché.

La requête spécifie au serveur le « type », le « champ » et l’« id » pour lesquels le formulaire est demandé.

Après vérification de l’existence des données et des droits sur celles-ci, le serveur renvoie le formulaire (sous forme de données javascript, au format JSON). Le type et les dimensions du champs sont déterminés d’après sa nature et la place réservée à l’élément. Il contient le source brut du texte, comme lorsque on édite depuis l’espace privé ; la police, la taille et la couleur des caractères sont préservées.

crayon.js associe ce formulaire à l’élément puis "cache" ce dernier.

L’utilisateur peut maintenant modifier les données.

Attention : l’affichage final ne peut être réalisé que par le serveur, un click en dehors de la zone d’entrée après des modifications affichera à nouveau le contenu originel.
Dans ce cas, une roue dentée vous signale que vous avez introduit une modification. Click sur le bouton ou double-click sur l’élément vous y ramène, elles ne sont pas perdues.
Si vous abandonnez cependant la page, un dernier rappel vous propose de sauvegarder.


Sauvegarde

Le formulaire possède une série de boutons/touches associées :

  • OK (ainsi que la touche Entrée [1]) permet de sauvegarder,
  • Annuler (ainsi que la touche Escape) abandonne toute mise à jour,
  • Un clic en dehors des zones de saisie cache ces zones et revient à l’affichage initial.

Il contient aussi des identificateurs et des clés associés aux données.

Le formulaire est soumis en POST par ajaxForm donc asynchrone. Sur réception, le serveur :

  • analyse les données soumises, leur cohérence et leur actualité (afin d’annuler l’envoi si les données ont été entre-temps modifiées par ailleurs).
  • vérifie une nouvelle fois les droits d’édition.
  • appelle les procédures internes de SPIP pour mettre à jour les données.
  • renvoie une vue des données modifiées, et déclenche les comportements javascript précisés par la fonction onAjaxLoad de SPIP.

Le système alimente notamment l’historique des modifications, de la même façon que l’espace privé.

Configuration

Le plugin propose plusieurs options, activables via le plugin CFG ; notamment :
-  un message si on confirme OK mais que rien n’est changé ;
-  une alerte permettant de sauvegarder les modifications si on abandonne la page alors qu’un texte est en cours d’édition ;
-  l’activation de la barre typographique ;
-  des couleurs permettant de mieux repérer les zones modifiables.

À noter : si le plugin est absent ou désactivé, la balise #EDIT{...} renvoie une chaîne vide ; cela permet donc de « crayonner » des squelettes même si l’on décide finalement de ne pas utiliser le plugin

Utilisation étendue

Toutes les tables standard de SPIP (articles, brèves, rubriques, etc.) sont gérées, y compris les forums et les signatures de pétition (mais, pour ces deux dernières, il faut utiliser le plugin Autorité pour permettre des modifications) ; pour chacune de ces tables, tous les champs de type « ligne » (titre, soustitre etc), ou « texte » (texte, chapo, descriptif...) sont crayonnables.

On peut également éditer les logos avec le crayon #EDIT{logo} ; un réglage permet de redimensionner ces logos à la volée lors de l’upload.

Les documents sont modifiables avec le crayon #EDIT{fichier} : le nouveau document vient remplacer l’ancien et sa taille, hauteur et largeur sont mises à jour. (NB : pas encore compatible documents distants).

Enfin, à partir de spip 2, on peut éditer les champs extra.

À noter :

  • Les crayons fonctionnent avec n’importe quelle table — à condition que cette table possède une clé primaire (numérique) qui s’appelle id_xxx, où le nom de la table est spip_xxxs.
  • pour la table spip_meta qui ne propose pas ce type d’index numérique, il faut utiliser la balise #EDIT d’une manière un peu différente en préfixant le champs à éditer par meta-, par exemple [2] :
    #EDIT{meta-descriptif_site}
    
  • pour éditer une valeur de configuration de plugin, on utilise la même syntaxe en ajoutant « meta » ; Par exemple pour éditer un champs de configuration adresse pour un plugin dont le préfixe est croque :
    [<div class="inner #EDIT{meta-croque/adresse}">(#CONFIG{croque/adresse})</div>]
    
  • Si un texte « crayonnable » est un champ MySQL MEDIUMTEXT ou plus long, les crayons affichent un TEXTAREA, et sinon, un INPUT.
  • Seuls les admins complets peuvent ainsi crayonner des textes provenant d’une table non-SPIP.

Editions simultanées de plusieurs champs

L’obtention du formulaire d’édition (« contrôleurs ») ainsi que la vue obtenue en retour sont surchargeables, par de simples squelettes (voir les exemples dans les répertoires controleurs/ et vues/ du plugin).

Ces formulaires peuvent travailler en parallèle sur plusieurs champs d’un enregistrement (article), voire plusieurs enregistrements d’une même table ou de tables différentes [3] : il y a là de quoi faire des interfaces d’édition spécialisées et très efficaces.

Comme toujours, contributrices et contributeurs sont bienvenus !

Notes

[1Ainsi que, sur Mac, la touche ctrl-S, et sur PC les touches alt-S ou F8, ou encore la combinaison MAJ-entrée.

[2Ceci est valable depuis la version 1.6.1 du plugin. Pour les versions précédentes la syntaxe est différente. Il faut insérer manuellement la class dans le code suivant la syntaxe meta-valeur-XXX où XXX représente le nom de la propriété à modifier. Par exemple pour modifier le nom du site (propriété : nom_site) on pourrait faire :

<h1 class="crayon meta-valeur-nom_site">#NOM_SITE_SPIP</h1>

[3Par exemple pour ouvrir en édition l’ensemble des champs descriptifs d’une adresse postale.

Debug : Les crayons ont un mode de débug activable en mettant dans mes_options.php la ligne suivante :

define('_DEBUG_CRAYONS', true);

Ce code ralentit un peu le fonctionnement, puisque le script est rechargé à chaque fois, mais facilite le repérage de bugs et le développement de nouvelles fonctionnalités.

Voir aussi : Doc complémentaire

Discussion

303 discussions

  • 2

    Petite question, est-ce possible de créer un crayon sur une balise #INFO_xobjet,id_objet ?

    • Cette question m’intéresse également.

    • À tester : <div class="#EDIT{#OBJET}">#INFO{#OBJET,#ID_OBJET}</div>
      Mais comme #INFO{#OBJET,#ID_OBJET} est dynamique, je ne suis pas certain que ça fonctionne... Si ça marche pas, il faudra retenter la syntaxe de base où il aura les informations nécessaires : <div class="crayon #OBJET-titre-#ID_OBJET">#INFO{#OBJET,#ID_OBJET}</div> (bien entendu, adapter selon la table, par exemple nom pour la table des auteurs, etc.)
      Tenez-nous au courant du résultat.

    Répondre à ce message

  • 1

    Bonjour,
    Je viens de faire un update sur un site précédemment en 3.1 sous PHP 7.2 où Crayons fonctionnait parfaitement, et là Crayons a cessé de fonctionner (cache vidé, tous les plugins désactivés, et toutes les options spéciales Crayons désactivées).
    Sauriez-vous d’où pourrait venir ce problème ?

    • Il a fallu attendre 48h pour que Crayons fonctionne de nouveau. Raison inconnue, ni de dysfonctionnement, ni de rétablissement.

    Répondre à ce message

  • Est ce que quelqu’un aurait une astuce CSS pour pouvoir utiliser les crayons lorsque l’élement à éditer se trouve dans une balise  ?
    Car du coup impossible d’éditer vu qu’au moindre clic on est envoyé vers la cible du lien.

    Répondre à ce message

  • Est-il possible de faire une boucle pour afficher le dernier article crayonné par l’auteurX ?

    Répondre à ce message

  • J’ai coché la fonction expérimentale de UPLOAD de doocuments.

    Cela fonctionne dans #TEXTE mais je ne le vois pas dans #REPONSE_1 qui provient d’un champ extra. Par contre #REPONSE_1 est crayonnable.

    De plus j’aimerais changer le css de Glissez un document ou une image dans cette zone pour l’ajouter à l’article. car lorsqu’il n’est pas ouvert il est presque invisible.

    Je ne suis pas capable de trouver quel est le css dans crayons.css

    Dernière question est-il possible et comment ? uploader un document autrement qu’en docX

    Merci

    Répondre à ce message

  • 2

    Bonjour à tous,

    Depuis 5 jours, j’ai un soucis impactant les sites de mes clients, je sollicite votre expertise car je ne trouve pas la source du soucis.

    J’utilise le superbe plugin LES CRAYONS afin de modifier des messages de forums par les modérateurs du sites. Depuis des années cela se passe parfaitement ;)

    Depuis 5 jours il n’est plus possible de valider la modification d’un texte de message de forum, je m’explique :
    -  L’icone crayons apparaît comme il se doit sur le champs
    -  Un clique sur l’icone (ou double clique sur le champs) permet bien de rendre le champs éditable
    -  Si on modifie le texte et que l’on clique sur le bouton vert « Enregistrer », un message d’erreur généré par le navigateur (chrome) apparaît avec pour seul message « Erreur de communication ».
    -  Je clique sur Ok (de la boite de dialogue) puis je constate que mon champs editable est désormais encadré en rouge et qu’il contient désormais du php lié à l’erreur voici un exemple :

    array(0) { } {"$erreur":"","wid5b8eb186d5e822_92730855":"
    Ici le texte du message que je souhaitai modifier<\/p>"}

    Suite à quoi, je n’ai plus les boutons de crayons, et le champs reste en version éditable...

    Autres tests :

    • Si je recommence mon test et que dans ma procédure je ne modifie par le texte, c’est à dire que je rends le champs éditable mais ne le modifie pas, je peux cliquer sur enregistrer et il n’y a pas de bug.
    • Si j’essai « Les crayons » sur un article, tout se passe bien.

    J’utilise SPIP 3.2.1 et crayons dans sa dernière version.

    Merci de votre assistance,
    JuL

    • Bonjour,

      Je viens tester la mise à jour d’un de mes sites qui utilisait toujours la version 1.26.17 et cela sans soucis. Suite au passage en version 1.26.18, le problème apparaît...

      La mise à jour de la librairie JavaScriptPacker n’y serait pas pour quelque chose ?

      En vous remerciant,

      JuL

    • Bonjour à tous,
      Je me re-réponds, après un certain nombre de tests, je me rends compte que le plugin « Crayons » n’est pas l’origine du problème mais la dernière version (v2.0.4) du plugin « Modération Modérée ».

      Je vais donc poster mon soucis dans le forum du plugin concernée.

    Répondre à ce message

  • 1

    Bonjour,

    Comment faire fonctionner les crayons avec le principe de Ajax Parallel Loading ?

    En effet, si j’utilise dans mes_options.php
    define('_Z_AJAX_PARALLEL_LOAD','content');
    alors les balises #EDIT{titre} ou #EDIT{texte} ne sont pas interprétées.

    Pourriez-vous m’éclairer svp ?

    • Essayer de feinter en ajoutant une classe #EDIT{qqc}hors du contexte ajaxé.

      il me semble que les crayons s’initialisent via un pipeline affichage_final.
      Si à l’affichage de la page il n y a pas de class #EDIT{qqc}crayon ne s’activera pas :(

    Répondre à ce message

  • 1

    Bonjour,

    Je rencontre régulièrement le problème de visibilité de l’icône-marqueur dans l’espace public sur certains sites présentant des fonds colorés. Serait-il possible de proposer 2 ou 3 graphismes d’icône par défaut (cerclés par exemple)... ?

    En vous remerciant

    • Re-bonjour,

      Désolé, j’oubliais également un autre soucis quand on a des sites colorés... dans ces cas-là, on a parfois du texte blanc, et Crayons appose alors du texte blanc sur fond blanc. Pourrait-on forcer (via CFG) les couleurs de fond et de texte (et de border, pourquoi pas) pour les champs Crayons de tout le site ?
      Bien entendu, il reste toujours la possibilité de surcharge à la mano, mais l’option pourrait être pratique et utile...

    Répondre à ce message

  • Renee Picard

    Est-il possible d’avoir un crayon sur un calendrier ?
    Avec <INCLURE{fond=contenu/calendrier,env} /> ou autre ?

    Répondre à ce message

  • 8

    Bonjour, je m’en remet à vous car je n’arrive pas à faire fonctionner le plugin Crayons pour les visiteurs... alors que c’est justement ce qui m’intéresse !

    La fiche personnelle des clients du site (statut 6forum) doit être éditable afin que ces derniers puissent modifier leurs informations sur le site public.

    Les champs sont modifiables lorsque je me connecte en tant que webmestre, mais lorsque je me connecte en tant que visiteur, rédacteur, ou même administrateur cela ne fonctionne plus. Je n’y comprend rien !!

    Serait-ce un problème lié aux autorisations dans le fichier mes_options.php ? Dois-je ajouter une autorisation ? Si oui, comment ? car je n’y connais vraiment pas grand chose en php...

    Merci beaucoup pour votre aide...

    • Oui il s’agit bien des autorisations, par défaut les visiteurs n’ont pas le droit de modifier quoi que ce soit, il faut donc apporter l’autorisation idoine dans mes_options.php

    • Bonsoir Fil,
      mille mercis pour ta réponse.
      Ça fait des heures que je suis dessus et j’en devient folle !
      Donc si c’est dans mes_options.php, aurais-tu une idée du code qu’il faudrait que j’ajoute... désolé mais cela dépasse malheureusement mes compétences et je n’ai rien trouvé dans la documentation.
      Encore merci à toi pour ton aide !

    • Essaie peut-être avec quelque chose du genre :

      function autoriser_auteur_modifier($faire, $type, $id, $qui, $opt) {
        return (
          in_array($qui['statut'], array('0minirezo'))
        || ($opt && $opt['champ'] == 'bio' && $id == $GLOBALS['visiteur_session']['id_auteur'])
        );
      }
      
      function analyse_droits_rapide() {
        return !!$GLOBALS['visiteur_session'];
      }
    • Bonjour Fil, merci pour ton aide...
      J’ai essayé le code que tu as suggéré et l’usage des crayons pour les visiteurs fonctionne sur la page de la fiche personnelle ! J’ai juste changé

      in_array($qui['statut'], array('0minirezo'))

      en

         in_array($qui['statut'], array('0minirezo', '1comite', '6forum'))

      Seul hic : la fiche indique bien les données personnelles sur la page pour chaque utilisateur logé, mais lorsqu’on double-clique sur ces données, les données remplies dans la fenêtre du crayon ne correspondent pas... il s’agit toujours des données personnelles du webmestre... Ce qui est très embêtant.
      Alors que dans la fiche de chaque auteur / visiteur de l’espace privé tout correspond.
      Idem dans les tables.

      J’utilise Inscription3, Champs Extras et Crayons.

      Voici le code qui appelle les crayons dans mon squelette :

      <BOUCLE_client(AUTEURS){0,1}{si #SESSION{id_auteur}{0,1}{!par date}{statut=encours}|oui}>
      
      
      <ul>
        <li class="#EDIT{nom}">
      Identifiant : [(#SESSION|{nom} )]
      </li>
      <li class="#EDIT{prenom}">
      Prénom : [(#SESSION| {prenom} )]
      </li>
      <li class="#EDIT{nom_famille}">
      Nom : [(#SESSION| {nom_famille} )]
      </li>
        <li class="#EDIT{email}">
      Adresse email : [(#SESSION| {email}  )]
      </li>
      <li class="#EDIT{adresse_livraison}">
      Adresse de livraison : [(#SESSION| {adresse_livraison} )]
      <li>
      <li class="#EDIT{ville}">
      Ville : [(#SESSION| {ville} )]
      </li>
      <li class="#EDIT{pays}">
      Pays : [(#SESSION| {pays}|id_pays_to_pays)]
         </li>
        <li class="#EDIT{telephone}">
      Numéro de telephone : [(#SESSION| {telephone} )]
      <li class="#EDIT{adresse_facturation}">
      Adresse de facturation : [(#SESSION| {adresse_facturation} )]
      </li>
      </ul>
      
      </BOUCLE_client>

      Il faudrait que le pré-remplissage des crayons correspondent aux données de l’utilisateur connecté.

      Est-ce qu’il y a une erreur dans ma boucle ?
      Ou plutôt une histoire de contrôleurs ou de vues dans les crayons ?

      Merci d’avance aux spipeurs avertis qui pourront m’aider...

      Lucie.

    • la boucle ne sélectionne pas l’auteur courant mais le premier de la base, il te manque semble-t-il un critère du type {id_auteur=#SESSION{id_auteur}}

    • Merci Fil ! Mais cela ne marche pas...
      Où devrais-je passer ce critère ?

      <BOUCLE_client(AUTEURS){id_auteur=#SESSION{id_auteur}}{si #SESSION{id_auteur}{0,1}{!par date}{statut=encours}|oui}>
      </BOUCLE_client>

      Comme ceci ?
      La fiche disparait....

      Je continue de faire des essais, mais si vous avez une idée je suis preneuse...
      J’ai presque fini le site... Mais là je bloque !

    • Vérifie tes critères, ils ne respectent pas la syntaxe attendue (ce bloc qui finit par |oui est très bizarre).

      Peut-être :

      <BOUCLE_client(AUTEURS){id_auteur=#SESSION{id_auteur}}{tous}>
      </BOUCLE_client>
    • Merci Fil !!! Tu es un génie ! ça fonctionne...
      J’espère que ça en aidera d’autres comme moi.
      Un belle journée à toi.
      Lucie

      (désolé pour le doublon)

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom