Les crayons

Un plugin pour une édition directe sur le site public

Publié le : 23 avril 2008 – Dernière modification le 22 janvier 2024 – par Fil, toggg – 861 commentaires

English, Español, français, Português do Brasil
1
2
3
4
5
197 votes
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

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

[2] Ceci 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>

[3] Par 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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

303 discussions

  • 2
    Bernard Blazin

    Fil, j’espère que tu continues ce plugin...

    Maintenant j’aimerais savoir s’il est possible de donner des droits aux 1comite afin qu’ils puissent modifier leurs textes depuis la partie publique du site ?

    J’ai un peu regardé le code mais j’avoue qu’il me dépasse. Il doit bien y avoir un endroit où l’on doit pouvoir faire une condition avec une requête avec jointure sur les tables spip_articles, spip_auteurs-articles et spip_auteurs, non ?

    Ou bien est-ce plus complexe que ça ?

    Merci de ta réponse..

    • Fil

      Au contraire, c’est bien plus simple que ça :-)

      La gestion des droits d’édition relève d’un autre plugin, qui prévoit déjà l’édition par les auteurs, et bien d’autres options : Le plugin « Autorité »

    • Bernard Blazin

      Mince alors ! Je suis en local avec la dernière 1.9.3

      J’ai CFG, Autorité et crayons bien entendu installés..

      Et ça ne marche pas..

      Seuls et toujours les 0minirezo peuvent modifier, les 1comite sont en panne d’encre :)

      Chose curieuse : Les derniers textes que je viens de publier sont placés dans l’id_secteur 0, pourtant je peux modifier avec crayon.. Les autres textes également..

      Ca n’a peut-être rien à voir, mais dans la config de Autorite on peut choisir les secteurs.. Bref je suis paumé :)

    Répondre à ce message

  • AJC

    J’utilise le plugin Crayon avec spip 1.9.2b en mode « d’accès restreint » (chaque association ne peut modifier que les articles qui la concerne et dont elle est auteur) pour ce faire on utilise également le plugin « Authorité ».
    Sur Macintosh (avec Safari ou Firefox) aucun problème, tandis que sur PC avec Internet Explorer le crayon n’apparait pas mais en double cliquant sur le texte la zone de saisie apparaît mais impossible de valider les corrections ou l’ajout de texte.
    Comment faire pour remédier à ce problème.
    Merci d’avance.
    voir la page (login : belote password : 000000)

    Répondre à ce message

  • 1
    REDONDO Julien

    Bonjour,

    Je souhaite modifier le mot de passe de l’utilisateur actuellement connecté avec Crayons.

    Si je tape un nouveau mot de passe, tout est ok dans la base. Mais si je me connecte ensuite, c’est tj l’ancien mot de passe qui est pris en compte ?

    Comment faire pour changer aussi les valeurs de htpass, alea_actuel, alea_futur ?

    J’ai crée un controleur et une vue, mais comment rajouter les infos supplémentaires à modifier ?

    merci d’avance,

    • Fil

      euh je crois qu’il faut modifier le core, la fonction revision_auteur() ne prévoyant pas encore de gérer le mot de passe avec ses bizarreries. Patches bienvenus !

    Répondre à ce message

  • 3
    Julien Redondo

    Bonjour,

    j’ai crée une nouvelle table dans la base spip :

    CREATE TABLE auteurs_complet (
    id int(11) NOT NULL auto_increment,
    id_auteur int(11) NOT NULL,
    prenom text collate utf8_Array_ci,
    fax text collate utf8_Array_ci,
    PRIMARY KEY (id),
    KEY index_auteur (id_auteur)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_Array_ci AUTO_INCREMENT=2 ;

    Ensuite depuis un squelette, j’interroge les données de cette table par une boucle :

    BOUCLE_auteur_complet(AUTEURS_COMPLET) id_auteurtout>

    Prénom : div class=« #EDITprenom » style=« padding:0 0 3px 0 ; »>[(#PRENOM|sinon...)]

    Fax : div class=« #EDITfax » style=« padding:0 0 3px 0 ; »>[(#FAX|sinon...)]

    /BOUCLE_auteur_complet>

    Le crayon apparaît bien sur le champ mais lorsque j’essaye de le modifier, j’obtiens une alerte javascript :

    auteurs_complet 1 prenom : Pas de valeur

    ET si je regarde dans les traces spip.log, j’ai un message d’erreur :

    Aug 17 15:10:52 192.168.50.254 (pid 18335) crayons : table auteurs_complet inconnue

    Est ce qu’il faut déclarer quelque part la nouvelle table pour que crayons la prenne en compte ?

    Est ce que cela se configure quelque part ?

    merci d’avance

    Cordialement,

    • Fil

      Regarde comment c’est fait dans le plugin inscription2

    • julien Redondo

      Bonjour,

      J’ai regardé le plugin Inscription2.

      Je n’ai pas trouvé les informations relatives à la boucle AUTEURS_ELARGIS.

      J’ai vu qu’il y avait des controlleurs et des vues mais je n’arrive pas à comprendre le système.

      Pourrais-je avoir des explications sur les fichiers que j’ai à créer ?
      Quels fichiers dois-je regarder dans Inscription2 pour que je puisse finaliser mon code ?

      merci beaucoup d’avance

    • Fil

      Oui, désolé, ça pêche encore quand on regarde les tables externes etc. Rien de simple, il faut débuguer pas-à-pas pour savoir où mettre spip_table et où mettre juste table, par exemple. Bon courage !

    Répondre à ce message

  • 3
    cedric

    Bonjour,

    disons que l’administrateur A a écrit un article. Je voudrais faire en sorte que lorsque l’administrateur B modifie l’article de A, son nom soit automatiquement intégré dans le champ des auteurs de l’article. Est-ce possible ?

    Et mieux encore, est ce possible de le faire apparaitre dans un autre champ, par exemple, en tant que correcteur : Article écrit par « A » (champ de l’auteur) et corrigé par « B » (champ du correcteur). ?

    J’ai cherché sur le net, dans des forums sur les boucles, mais je cale.

    J’espère que vous pourrez m’aider .

    • Fil

      Le squelette Gribouille fait exactement ça, à condition d’activer le suivi des révisions.

    • cedric

      Merci.

      Je me suis inspiré de la boucle sur Gribouille pour pouvoir noter le nom de celui qui a modifié l’article en dernier :

      < BOUCLE _revision( spip_ versions) id_article0,1par date inverse >
      V.# ID_VERSION - [(# REM) (# DATE] [(# ID_AUTEUR)]
      BOUCLE_ revision >

      Ca marche parfaitement si ce n’est que je voudrais remplacer le numéro de l’auteur (ID_AUTEUR) par son nom, mais #NOM ne semble pas fonctionner. N’est-ce pas possible de remplacer le numéro par le nom ?

      Merci pour votre aide !

    • Fil

      Pour avoir le nom, tu peux faire une boucle (AUTEURS){id_auteur}. Ou une boucle de type « jointure », comme dans Gribouille (je crois, pas vérifié).

    Répondre à ce message

  • 2
    Draikhin

    Salut tout le monde,

    J’utilise les crayons avec Gribouille mais il semble que les CSS sont pas des plus compatibles avec les miennes : http://www.zetudiants.net/css/styles.css

    Si vous souhaitez constater par vous même : http://www.zetudiants.net/-Campus-.html
    -  login : test
    -  pass : 000000 (soit 6 zéros)

    Lorsque vous modifer un article vous voyez la catastrophe.

    Est-ce que vous avez des idées sur le problème parceque là je sature ?

    @bientôt,
    Olivier

    Répondre à ce message

  • 1
    remi

    y a t il moyen de faire apparaitre la barre typo lors de l’édition avec le plugin crayon ?

    • cedric

      Est-ce que ca a pu se réaliser depuis ?

      Perso, je n’y arrive pas !

      Quelqu’un a une solution pour faire apparaitre la barre de typo lorsqu’on édite un champ avec le crayon ?

    Répondre à ce message

  • 2
    zerocool

    Bonjour

    sur mon site grace au plugin balise session j’ai fait un espace membre pour que les membres inscrit sur mon site modifie leur information avec le crayon
    ensuite avec le plugin champ homonyme j’ai creer des champs en plus, voici l’exemple d’un champ que j’ai rajouter :
    jouez vous sur internet ? avec case a cocher : oui ou non

    est ce possible qu’avec le crayon le visiteur peut avoir acces a ces 2 propositions quand il veut modifier cette information ?

    Merci

    • Fil

      C’est possible, mais pas encore assez facile.
      Tu trouveras les explications à partir de http://www.spip-contrib.net/Les-cra...

    • zerocool

      par contre a la place de modifier le ficher « editer_article » moi dans mon cas je doit modifier « editer_auteur ou editer_auteurs » ? puisque c’est des champs que j’ai rajouter dans la table auteurs

    Répondre à ce message

  • janolap1

    Chez moi, la roue tourne en permanence, dans le vide.

    Config : IIS, PHP5.0.5, MySQL 4.0.26-nt, Spip 1.9.2b

    Si je clique sur Recalcul, la modification a bien été prise en compte

    Si j’appuie sur Entrée (pour les zones de texte pas pour textarea), les boutons apparaissent et le fonctionnement est normal.

    C’est simplement pour les boutons par défaut que le bouton Ok ne fonctionne pas correctement.

    J’ai rien dans Spip.log, ni dans MySQL.log. Pas d’erreur javascript. #INSERT_HEAD est en place. Le mode debug est ON, mais pas plus d’erreur...

    Répondre à ce message

  • Loiseau2nuit (anc. Zzz.)

    Hello les gens,

    Chez un pote, ca ne marche désespérément pas, pourtant tout y est, le INSERT-HEAD, les class #EDIT, cfg, tout...

    Le site pour lequel on l’implémente tourne en 1.9.2b avec le Squelette Alternatives. Ya une subtilité à côté de la quelle on serait passé et qui fait que ca ne marche pas avec ce squelette ?

    Merci

    pour Restauration-Horlogerie.Com

    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