SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 288 visiteurs en ce moment

Accueil > Rédaction > Édition publique > Crayons > Les crayons

Les crayons

Un plugin pour une édition directe sur le site public

23 avril 2008 – par Fil, toggg – 818 commentaires

Toutes les versions de cet article : [English] [Español] [français]

178 votes

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.

Actualité

La version 1.15.1 a été publiée le 22 mars 2013.

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}

-  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, les contributeurs sont bienvenus !

Voir en ligne : http://plugins.spip.net/crayons

P.-S.

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.

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 :

  1. <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.

Dernière modification de cette page le 5 avril 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 2 décembre 2016 à 12:58, par Julien En réponse à : Les crayons

    Bonjour,
    J’utilise le plugin Crayons, le plugin Champs Extras et le plugin Inscription 3.
    J’ai créé un champ extra « collection » pour les auteur, en bouton radio à deux choix : visible ou invisible.
    Je voudrais que les auteur puisse éditer ce champ à l’aide de crayons, mais je n’y arrive pas.

    1. [<li class="#EDIT{collection} texte">Votre collection est visible ou cachée des autres membres ? : (#COLLECTION|sinon{"Vous n'avez pas encore renseigné cette information."})<br /></li>]

    Si je rentre l’information depuis l’admin, ça s’affiche bien côté public, mais côté public, je ne peux pas l’éditer. Lorsque je double clic sur le champ (grâce à crayons), je n’ai pas les deux boutons radio, mais une ligne de texte avec écrit « visible » ou « invisible » dedans.

    Une idée ?

    Pareil pour le champ « civilité » que j’ai créé avec « inscription3 ». Quand je veux l’éditer côté public, j’ai une ligne de texte avec soit « M » soit « F » dedans.. Hors là aussi je voudrais le boutons radio à cliquer.

    Merci à vous.

    • Le 26 avril à 12:18, par jpcrea En réponse à : Les crayons

      Si on fait :

      <ul><li class='#EDIT{collection}'>#LISTER_VALEURS{collection}</li></ul>

      Cela devrait fonctionner.

    • Le 26 avril à 16:56, par Julien C En réponse à : Les crayons

      Merci à toi, je vais aller voir si ça fonctionne :-)
      J’en avais encore besoin après tout ce temps.

    Répondre à ce message

  • Le 27 mars à 12:43, par Francky En réponse à : Les crayons

    Hello, je viens de faire plusieurs tests
    Le plug est dit pour 1.9 mini et 3.*.* max, je vais le descendre à 3.1.*, car cela ne sert à rien de le mettre compatible 3.2, alors qu’il n’est pas complètement compatible, surtout qu’il y a de temps avant que la 3.2 « stable » sorte !
    Sinon, j’ai fait des essais en 2.1 la dernière qui a donc encore du support et la 3.2-alpha
    -  2.1 Le plug ne sert à rien sauf à faire l’installation de cfg, le problème, c’est que rien ne l’indique (ne l’oblige) et le téléchargement de doc ne semble pas fonctionner

    -  3.2 Le téléchargement de document semble avoir un problème parfois, cela fonctionne, parfois non, Alors que le téléchargement d’un doc via la médiathèque fonctionne toujours (depuis votre ordinateur) que cela soit un gros fichier 7.4 mo ou un petite 120ko

    Répondre à ce message

  • Le 26 novembre 2014 à 18:56, par Polar oïd En réponse à : Les crayons

    Utilisatation étendue

    pour chacune de ces tables, tous les champs de type « ligne » (titre, soustitre etc), ou « texte » (texte, chapo, descriptif...) sont crayonnables.

    Bonjour, j’aimerais savoir s’il est possible d’éditer un champ extra de type radio ’oui_non’ avec ce plugin ? :)

    • Le 27 mai 2015 à 14:57, par Julien En réponse à : Les crayons

      Bonjour la réponse à cette question m’intéresse.
      Avez-vous trouvé ?

    • Le 2 décembre 2016 à 16:26, par Julien En réponse à : Les crayons

      Bonjour,
      toujours pas de réponse à ce problème ?

    Répondre à ce message

  • Le 26 octobre 2016 à 15:59, par bruno31 En réponse à : Les crayons

    Hi

    Sous ANDROID avec écran tactile, c’est une vrai galère avec le CRAYON. Il suffit effleurer n’importe quelle partie de l’écran pour que le CRAYON passe en mode édition.

    Existe t’il une solution ?

    Répondre à ce message

  • Le 26 octobre 2016 à 15:57, par bruno31 En réponse à : Les crayons

    Bonjour

    Les textarea du crayon ont leur width forçée à 170px. Je préfèrerai 100%. Apparemment c’est fait en dur par du javascript. Est-il possible de le configurer ?

    Répondre à ce message

  • Le 12 octobre 2016 à 10:12, par Urs Riggenbach En réponse à : Les crayons

    Bonjour,

    Est-il possible d’utiliser des « crayons » avec la balise #LOGO_ARTICLESURVOL ?

    Je peux utiliser des crayons pour la balise #ARTICLE_LOGO avec #EDIT logo, mais il ne fonctionne pas pour l’image « survol ».

    Je vous remercie,
    Meilleures salutations,
    Urs

    Répondre à ce message

  • Le 28 septembre 2016 à 17:09, par beno En réponse à : Les crayons

    Bonjour,
    Il semble qu’il y ait un petit bug sous SPIP 3.1.1 avec la dernière version du plugin (1.25.0) : la barre typographique pour ne s’affiche pas lorsque cette option est cochée dans les paramètres du plugin...

    • Le 28 septembre 2016 à 20:02, par b_b En réponse à : Les crayons

      Je ne reproduis pas le bug chez moi, une erreur javascript dans ta page ?

    • Le 29 septembre 2016 à 17:15, par beno En réponse à : Les crayons

      Bonsoir b_b,
      J’ai désactivé tous les javascripts « 6. Vos scripts » dans le head, désactivé tous les plugins, vidé le cache, désactivé le cache, et je confirme (pour ma part) l’impossibilité d’afficher la barre typographique. Si tu as des recommandations de tests plus avant, je prends...

    • Le 5 octobre 2016 à 11:30, par beno En réponse à : Les crayons

      Bonjour b_b,
      Tu avais raison au sujet du JavaScript : dans squelettes, j’avais créé le dossier « js » dans lequel j’avais jquery-1.12.0.min.js
      C’est ce javascript qui entravait le bon fonctionnement de Crayons...

    • Le 5 octobre 2016 à 12:23, par b_b En réponse à : Les crayons

      Cool, content que tu aies trouvé la solution ;)

    • Le 5 octobre 2016 à 16:00, par beno En réponse à : Les crayons

      grâce à toi ;-) merci encore !

    Répondre à ce message

  • Le 27 septembre 2016 à 19:44, par Yohooo En réponse à : Les crayons

    Hello,

    Pourrait-on rendre le plugin crayon compatible avec les logos d’évènements du plugin agenda en ajoutant ligne 18 du fichier « vues/logo.html » :

    1. |sinon{[(#ID_EVENEMENT|?{#LOGO_EVENEMENT_NORMAL})]}

    Cela permettrait au logo d’évènements d’apparaître lorsque l’on vient de le téléverser. Etant donné la fréquente utilisation du plugin agenda, ça serait vraiment pratique d’avoir cette fonctionnalité par défaut dans le plugin crayon .

    Répondre à ce message

  • Le 5 septembre 2016 à 12:05, par ADB En réponse à : Les crayons

    Bonjour
    Comment désactiver l’effet Crayons sur les légendes d’images alors qu’il n’y a pas de #EDIT devant l’appel d’un champ (contenant des images légendées) ?
    J’ai ceci :

    <div style="display: inline-block">
    [(#PHOTO|antispam|image_reduire{400,x})&nbsp;]
    [(#LIEU|antispam|image_reduire{400,x})&nbsp;]
    </div>  

    et la div ne s’applique pas bien à cause de Crayons sur la légende.
    Merci

    Répondre à ce message

  • Le 28 août 2016 à 19:33, par FdM En réponse à : Les crayons

    J’ai régulièrement un problème d’affichage suivant : Suivant le contexte, le champs input n’apparait pas, comme sur la photo en annexe.

    La syntaxe #EDIT est correctement mise en œuvre.

    Doit-on passer par un nouveau contrôleur ?

    FDM

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Adieu l’ami...

    17 juin 2007 – 51 commentaires

    17 juin 2007 - 17 giugno 2007 Bonsoir, Nous venons d’apprendre une triste nouvelle : la mort soudaine de notre ami Bertrand Gugger, aka toggg, geek généreux, au tempérament bien trempé, dont le cœur bourru s’est éteint cette nuit. Il avait 50 (...)

  • Ordoc : ordonner les documents attachés

    3 février – 20 commentaires

    Ordoc est un plugin pour SPIP 3.1 qui ajoute aux listes de documents attachés à des objets éditoriaux (tel que les articles), la possibilité d’ordonner les documents par glisser / déposer. Ordoc ajoute dans listes de documents attachés à des objets (...)

  • Albums 3

    8 août 2014 – 226 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • Spip2Spip

    21 février 2008 – 160 commentaires

    Spip2spip permet de synchroniser le contenu de plusieurs sites SPIP entre eux en étendant le principe de la syndication thématique. Les articles d’un SPIP sont récopiés d’un site à l’autre en conservant leur formatage (...)

  • GIS Geometries

    19 mars 2014 – 48 commentaires

    Ce plugin ajoute au plugin GIS la possibilité d’afficher et d’éditer des formes géométriques. Avertissement : ce plugin ne fonctionne que sur les sites qui utilisent une base de données MySQL en version 4.1 minimum, car la gestion des données (...)

Ça spipe par là