SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 705 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 – 795 commentaires

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

175 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 25 avril à 21:20, par kristoff23 En réponse à : Les crayons

    Est-il possible d’envisager un fonctionnement du plugin crayon : édition d’article , modification de documents pour un visiteur NON CONNECTÉ ?

    • Le 25 avril à 21:35, par Fil En réponse à : Les crayons

      C’est déjà le cas, comme par exemple sur le « carnet de spip-contrib » ; c’est essentiellement une question d’autorisations.

    • Le 25 avril à 21:40, par Maïeul En réponse à : Les crayons

      une méthode simple pour gérer ces autorisations est d’utiliser Le plugin « Autorité »,

    • Le 25 avril à 21:42, par kristoff23 En réponse à : Les crayons

      Merci de t réponse mais je ne comprends pas ...

      Qu’entends-tu par autorisations , je n’ai rien vu de tel dans :
      Configuration —> Interactivité ...

    • Le 25 avril à 21:44, par kristoff23 En réponse à : Les crayons

      OK merci Maieul et Fil .

      je connais ce plugin et je vais essayer ...

    • Le 25 avril à 21:53, par kristoff23 En réponse à : Les crayons

      Génial : j’ai fait ça avec « autorité » : ça a l’air de marcher au poil , on va voir ce qu’en pensent les visiteurs ...

      Merci à vous deux ...

    Répondre à ce message

  • Le 19 février à 17:23, par Manu En réponse à : Les crayons

    Bug sur les images gérées par une autre Bdd lors du recalcul après modification ?

    Lorsqu’un site A interroge une base de donnée "externe : ex un autre site SPIP appelons-le SPIP B)et affiche le contenu d’un article venant de B, les crayons marchent bien, pas de souci, mais, lors du « recalcul » qui est fait lorsqu’on valide une modification, ce ne sont pas les bonnes images qui apparaissent :
    Ex : l’article du site B contient <imgxx>, le recalcul des crayons va chercher le document local (=du site A) d’id = xx et non pas le document id = xx dus site B. Un recalcul « général » (via le bouton d’admin) rétablit les choses mais, bon, c’est un peu perturbant au départ

    Répondre à ce message

  • Le 11 février à 18:05, par Beno En réponse à : Les crayons

    Bonjour,
    juste pour signaler qu’il semble que sous SPIP 3.1, Crayons n’affiche plus la barre typo.

    Répondre à ce message

  • Le 31 janvier à 07:56, par Beno En réponse à : Les crayons

    Bonjour,

    Dans le même genre que Bruno, je viens de m’arracher les cheveux plusieurs jours à cause des boutons « annulation » et « enregistrement » qui étaient devenus inopérants sur le plugin. (sous Spip 3.0 et 3.1). J’ai désactivé tous les plugins, cela ne venait pas de cela.

    Il s’agissait en fait de l’appel Dojo fait dans le HEAD qui perturbait complètement le comportement des boutons de Crayons. J’ai essayé de déplacer l’appel Dojo, mais rien n’y fait : s’il y a appel Dojo, Crayons cesse de fonctionner.

    1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

    Est-ce normal ?
    Y a-t-il une solution ?

    Répondre à ce message

  • Le 22 janvier à 15:22, par bruno31 En réponse à : Les crayons

    Dernière mise à jour 1.25 : la cata !

    J’ai eu la mauvaise idée de lancer la maj vers la 1.25.

    Je suis en mutualisé et tous mes sites ont planté. Cela m’a pris plusieurs heures pour tout faire repartir.
    Pire, le crayon ne fonctionne plus : j’ai bien le textarea d’édition, mais quand je sauvegarde, j’obtiens une « erreur de communication ».

    Est-ce un problème connu de cette version ?
    D’autres rencontrent-ils la même difficulté ?

    • Le 23 janvier à 19:08, par bruno31 En réponse à : Les crayons

      Plus de précisions :
      Le CRAYON fonctionne sur certains champs, par exemple, c’est OK avec descriptif_site.

      Avec certains autres chamsp, j’arrive à obtenir une boite d’édition, mais j’ai une « erreur de communication » sur enregistrer.
      Exemple : titre d’article.

      Et sur d’autres champs, j’ai une « erreur de communication : unexpected token » dés que je clique sur le crayon. Je n’ai même pas de boite d’édition.
      exemple : article intro

      Et le CRAYON fonctionne totalement sur quelques rares sites.

      Je suspecte un conflit avec un autre plugin.

    • Le 23 janvier à 19:32, par bruno31 En réponse à : Les crayons

      En comparant les plugins installés sur les sites sur lesquels le CRAYON fonctionne, et ceux sur lesquels le CRAYON plante, et en désactivant progressivement, j’ai trouvé le plugin fautif.
      Il s’agit d’une version modifiée de SPIPDF.
      Le truc bizarre, c’est que SPIPDF n’a, en théorie, aucun effet sur le code généré en partie public.

      Bon j’ai une piste...

    • Le 26 janvier à 11:56, par bruno31 En réponse à : Les crayons

      Finalement, il y a un gros problème avec cette 1.25

      Maintenant, cela plante dans l’espace privé. La plupart des liens tel que « Ajouter auteur » sont inopérants.
      Quand j’édite, j’ai bien la boite d’édition mais impossible d’éditer quoi que ce soit.

      et cela même en désactivant SPIPDF.

    • Le 26 janvier à 17:57, par bruno31 En réponse à : Les crayons

      Bon je galère trop avec cette 1.25.

      Comment puis-je récupérer une ancienne version ?

    • Le 26 janvier à 18:09, par Maïeul En réponse à : Les crayons

      c’est étonnant : je n’ai aucun souci avec cette version du plugin. Il fonctionne bien côté public comme côté privé.

      Je me demande si tu n’aurais pas des soucis de js emmelé. Essaie voir en vidant le fichier local/cache-js puis en recalculant la page.

    • Le 26 janvier à 19:31, par bruno31 En réponse à : Les crayons

      Bonsoir Maïeul

      Je suspecte aussi un bug de JS. Peut-être avec JQUERY ?

      J’ai supprimé local/cache-js, puis recalculer la page => Pas mieux.

    • Le 26 janvier à 19:42, par Maïeul En réponse à : Les crayons

      bizarre. bon il faudrait vérifier sur une install sans aucun autre plugin...

    • Le 26 janvier à 19:54, par bruno31 En réponse à : Les crayons

      C’est clair qu’il s’agit d’un conflit avec un ou plusieurs plugins.

      Je pensais avoir trouvé que cela venait de SPIPDF. Mais non, ce matin, j’avais le souk dans l’espace privé alors que SPIPDF était désactivé.

    • Le 27 janvier à 10:23, par Mist. GraphX En réponse à : Les crayons

      Juste pour confirmer : Je n’ai pas de soucis non plus, je viens juste de le mettre a jour sur un site qui est en production, je n’ai pas eut de retour de la part des rédacteur (sur ce sujet ^^).

      Sinon en local (mode serveur, pas mamp), mes sites sont mutualisés, et je ne rencontre pas de problèmes non plus, avec Crayons.

      Voila ça résoud rien, mais ça oriente vers la ou chercher... bon courrage

    • Le 27 janvier à 10:25, par bruno31 En réponse à : Les crayons

      C’est vraiment très très bizarre.

      Je n’arrive pas à cerner avec quel plugin CRAYON rentre en conflit.
      Je désactive un plugin lambda, le problème disparait sur le site A.
      Je vais sur le site B, je désactive lambda, mais le problème persiste. Et c’est la désactivation du plugin beta qui résout l’anomalie.

      Parfois, le bug a disparu, puis il revient peu après.

    • Le 27 janvier à 10:51, par Mist. GraphX En réponse à : Les crayons

      effectivement c’est bizarre, y’a pas un cache serveur ?ça viens pas de spip ou crayon pour le coup, la je pencherais plutot pour quelquechose dans ce genre : un module apache ou autre qui compress les js, ... voir ce qu’il y’a dans le .htaccess ou dans la config apache …

      c’est un serveur dédié, une virtualisation ?

    • Le 27 janvier à 14:20, par bruno31 En réponse à : Les crayons

      et bien les amis, j’ai passé mes dernières heures dans la 4e dimension. %-)

      Mais j’ai trouvé d’où venait le bug :
      il s’agissait d’un problème d’encodage sur un seul fichier d’un plugin perso : xxx_fonctions.php qui était encodé UTF-8 avec BOM. C’est quoi ça, BOM ?
      Je l’ai encodé en UTF-8 sans BOM, et plus de problème. :-))

      Pour info, j’ai ré-essayé une ancienne version de CRAYON et le problème persistait.
      Donc cela n’est pas la 1.25 qui était en cause, ni sa mise à jour qui a révélé un problème dans mes autres plugins.
      Je ne sais pas pourquoi c’est apparu subitement ?

      C’est quand même bizarre, non ?

      En tous cas, MERCI pour votre aide.

    • Le 27 janvier à 17:19, par Maïeul En réponse à : Les crayons

      bom, bom quand votre moteur fait bom.

      plus sérieusement le caractère bom est un caractère qui dit si on doit lire les octets unicode de gauche à droite ou de droite à gauche. Mais normalement en utf8 on n’a pas besoin de cela, car utf8 est neutre sur cette question (utf16, utf32 ne le sont pas). Cependant si on met une information bom dans un fichier utf8 il peut être mal interprété -> et paf tout cela fait planter le zbin.

      Voir https://fr.wikipedia.org/wiki/Indicateur_d%27ordre_des_octets

    Répondre à ce message

  • Le 12 décembre 2015 à 08:04, par Patrick En réponse à : Les crayons

    Bonjour,
    J’utilise ce plugin depuis longtemps, et je le trouve très utile.
    Cependant, je n’arrive pas à l’installer chez SFR, il provoque une erreur 500, aussi bien avec une version des crayons du début de cette année que de la version de dec 2015.
    En local avec le même spip 3.021 et le même squelettes, tout fonctionne parfaitement.
    Il semble donc que le serveur soit en cause.
    Existe t il une manière de l’obliger à prendre les crayons en compte ?
    Merci en tout cas, il m’est bien utile sur d’autres sites.
    Bonne journée.

    • Le 31 décembre 2015 à 14:56, par Patrick En réponse à : Les crayons

      Bonjour,
      un petit complément d’info, même résultat aujourd’hui, et aprés avoir supprimé les crayons, le message suivant s’affiche en page d’accueil de la partie privée :

      Erreur dans les plugins : /var/www/xxxxxxxx.perso.neuf.fr/public_html/plugins/crayons/crayons_fonctions.php

      Si quelqu’un a une idée.
      Bonne année 2016

    Répondre à ce message

  • Le 7 janvier 2014 à 00:59, par Thierry Kauffmann En réponse à : Les crayons

    Bonjour,

    j’ai les crayons en version 1.16.6 et ceux-ci ne fonctionnent pas : j’ai l’erreur javascript suivante (avec Firebug en mode console javascript)

    SyntaxError: missing ) after argument list
    http://www.parcsaintpaul.fr/spip.php?page=crayons.js&callback=startCrayons
    Line 4617

    iframeDoc.write("<!doctype><html><body><script type="text/javascript">

    Il semble effectivement qu’il y ait un problème de guillemet ...

    • Le 7 janvier 2014 à 01:24, par Thierry Kauffmann En réponse à : Les crayons

      (re)-Bonjour,

      après vérfication, c’est le plugin switcher (toujours en test...) qui créait un conflit !

      Après désactivation du plugin switcher et vidage du cache du navigateur, les crayons sont de retour !

      Youpi !

    • Le 11 décembre 2015 à 10:03, par Christophe Noisette En réponse à : Les crayons

      Suite à la lecture patiente et méthodique de ce forum, j’ai trouvé la réponse à ma question...
      Chez moi aussi le crayon n’apparaissait pas... et sur une contrib’, quelqu’un a parlé d’une vérif via la dist... Or comme le crayon n’apparaissait pas sur la dist... j’ai compris que le problème ne venait pas de ma programmation, mais du contexte général de mon site (jquery ou autres)...
      Et là... en lisant cette réponse, comme j’avais aussi switcher qui était installé, je me suis dit : « testons sans ce plugin », et youpi, le crayon est revenu.
      Version utilisée :
      Spip : 3.0.20
      Crayon : 1.21.0
      Switcher : 0.2.4

      Merci aux contributeurs, à toute cette belle communauté de spipien-ne-s
      Amitiés
      Christophe

    Répondre à ce message

  • Le 26 octobre 2015 à 11:35, par Thao En réponse à : Les crayons

    Bonjour !
    Je tente de faire s’appliquer le plugin « crayon » à un élément html « a », il s’applique bien, seulement, lorsque je veux cliquer sur le « crayon » ça redirige sur le lien cible du tag « a » ... Impossible donc de changer le contenu de cette balise car la page change.

    Je me demandais si il y avait une solution quelconque ? Je ne trouve rien correspondant à ma question en ligne :)
    Merci !

    • Le 26 octobre 2015 à 11:40, par Fil En réponse à : Les crayons

      en effet c’est pas possible

    Répondre à ce message

  • Le 9 octobre 2015 à 00:14, par laurent En réponse à : Les crayons

    Salut à tous

    Je plussoi ! :-)
    Permettre de désactiver le double clic dans la config ? Ou le désactiver pour les utilisateurs de tablettes et téléphone en tout genre ?

    Merci en tout cas !

    Répondre à ce message

  • Le 3 septembre 2015 à 07:28, par Beno En réponse à : Les crayons

    Bonjour,

    Je cherchais à surcharger les images (et notamment les icônes de modification visibles sur le site public), mais ça ne fonctionne pas correctement (semble-t-il), et il faut écraser les fichiers directement dans le plugin... pourtant ce serait bien, surtout quand le site public a pour fond de texte une couleur bleu ;-)

    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

  • GIS 4

    11 août 2012 – 1182 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Pages uniques

    11 décembre 2008 – 248 commentaires

    Allez, avouez... il ne vous est jamais arrivé d’avoir besoin d’articles qui ne sont rattachés à aucun rubriquage particulier ? Des articles uniques, n’ayant ni de thème, ni de rapport avec aucun autre ? Ou encore des articles pour lesquels vous avez (...)

  • ScolaSPIP 4

    19 janvier – 39 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 4 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • spiPDF : générer des contenus sur mesure en PDF

    16 février 2011 – 200 commentaires

    Le plugin spiPDF génère des fichiers au format PDF d’article ou de tout autre élément SPIP, simplement à partir d’un squelette construit au format HTML 4 et facile à modifier. Présentation Le plugin génère des fichiers PDF à partir d’un squelette (...)

  • cinotif : Notification sur abonnement

    22 janvier 2013 – 64 commentaires

    Ce plugin permet de s’abonner pour être averti, par messagerie, lorsque certains événements surviennent sur le site ou sur une partie du site. Les objectifs de ce plugin L’objectif est qu’une personne puisse s’abonner pour être avertie, par (...)