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
198 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

  • 4
    cole

    bonjour, j’ai installé crayons sur spip 2.0.10, et au début je ne comprenais pas pk il ne marchais pas, puis très curieusement, il fonctionne sur les affichages d’articles et pour les rubriques, il n’y a que les boutons « OK » et « X » qui apparaissent, je regarde la source, il n’y a ni input ni textarea comme il y a lorsque je crayonne un article. Est ce que qqn a rencontré ce pb ?
    Qu’est qui fait que les champs d’un article sont crayonnable alors que ceux d’une rubrique ne le sont pas, d’ailleurs même si on liste les articles d’une rubrique, le titre des articles se crayonne a moitié , cad qu’il permet l’edition grace a lapparition du stylo mais n’affiche pas de champ inout ouo textarea...
    Si qqn a des eclaircissement sur ce mystère ....

    • cole

      re, bon j’ai supposé que ma version de spip provoquait pour une raison inconnue ce bug et j’ai migré sous 2.1.6 où ça fonctionne bien, plus qu’à reconfigurer tout mes autres plugins et vérifier la compatibilité avec 2.1.6

    • cole

      et non, ce n’est pas une question de version de spip, visiblement, c’est après l’install de thélia (dc avt meme lactivation du plugin) que le crayon bug avec l’edition des champs rubriques... je continue de voir en quoi ça bug

    • cole

      ayé, le bug est identifié, mais ne comprend tjrs pas. Lorsqu’on install thelia sans meme activer le plugin, le crayon bug sur les rubriques et les champs d’edition n’apparaissent pas. Le pb peut etre resolu si lors de l’install de thelia, on le fait dans une autre base que celle de spip. C’est que je ne comprend pas car les tables de spip utilise le prefixe spip et ceux de thelia non, donc je ne vois pas en quoi le simple fait de rajouter les tables thelia avec celles de spip créer le bug en question...

    • cole

      en fait c’est la table « rubrique » de thelia qui crée ce bug, si je le renomme, je peux crayonner les champs de rubrique. J’ai essayé de renommer mecaniquement dans les sources de thelia tous les endroit ou il fait mention de « rubrique » dans le contexte d’une requete sql par "rubrique_thelia, mais ça n’a pas marché, si qqn se sent de corriger ça proprement... voila !

    Répondre à ce message

  • cedric

    Bonjour,

    Si j’active dans mes_options la constante :

    define(’_Z_AJAX_PARALLEL_LOAD’,’contenu,navigation,extra,more’) ;

    Le petit crayon bleu ne s’affiche plus pour modifier le texte !!

    Normale docteur ? !

    Meilleur voeux à la Spip Team et aux spipieurs.

    Cédric

    Répondre à ce message

  • Pandakore

    Bonjour à tous,

    je viens de tester ce plugin qui fonctionne super bien sur tout sauf sur les LOGO :(
    En effet quand je clic sur le crayon du logo seul les bouton OK et X apparaissent mais rien d’autre
    voici mon code :

    [<div class="#EDIT{logo_article}">(#LOGO_ARTICLE|image_reduire{200,200})</div>]

    Ais-je fais une erreur ?

    Cordialement

    Répondre à ce message

  • 1
    d00

    Bonjour’
    Je ne comprends avec la dernière install de SPIP, et des squelettes maisons (avec #INSERT_HEAD dans le head), je n’ai aucun CSS, ou JS de crayons inclus dans mes pages (une fois logué), j’ai pourtant utilisé le plugin autorité, en m’ajoutant aussi dans mes_options.php.
    Et dans mes squelettes j’ai bien rajouté les #EDITnom..

    J’ai testé avec les squelettes de base, rien n’y fait.
    Le plugin n’est donc pas activé pour une raison qui m’échappe totalement..
    Vous avez une idée ?

    Merci !

    • miroito

      j’ai le même problème suit la discussion précédente

    Répondre à ce message

  • 6
    miroito

    c’est pas normal j’ai reussi àle faire fonctionner une seule fois. mais pour une histoire de class j’ai du le retoucher et maintenant quand je met le code ça ne marche plus comment faire ??

    • Thomas Weiss

      On peut voir le code ?

    • miroito

      <div class="#EDIT{texte}">#TEXTE</div>

      voilà j’ai mis ça.

    • Thomas Weiss

      Le code avec la BOUCLE SPIP ainsi que le code HTML généré ?

    • miroito 
      <BOUCLE_pagination(FORUMS) {id_article} {par date} {0,600} {pagination 15}>
<div class="#EDIT{texte}">#TEXTE</div>
 </BOUCLE_pagination>

      c’est correct non ??

    • Attention je crois qu’il y a une restriction des crayons avec les forum. Voir la documentation.

    • miroito

      J’ai vu que le plugin autorité permettait de choisir pendant combien de temps on pouvait modifier un message de forum et j’ai mis ad vitam. J’ai aussi éssayé le même code sur le texte d’un article mais ça n’a pas marché non plus et je ne sais pas pourquoi.

      Y a t-il des plugin qui ne sont pas compatibles avec Les crayons ??
      Si oui lesquels ?

    Répondre à ce message

  • Régis

    Bonjour,

    J’ai fait une migration de mon site de la version 1.9.2 à 2.0.10. J’en ai également profité pour faire une migration du plugin crayons de la version 1.0 à 1.6.3.

    Le problème que je rencontre est quand je souhaite modifier un document dans le front avec le plugin crayon. Le document est bien changé, le type également mais pas la date du document. c’est toujours l’ancienne date qui est en mémoire.

    Dans la précédente version du plugin la date était changé. Est-ce normal que la date ne soit plus changé ? Y a t-il un paramètre à modifier pour que la date soit bien modifié avec le document.

    Merci d’avance.

    Répondre à ce message

  • Roberto

    Je rencontre un problème sur un site SPIP 2.1.2 [16017] avec les plugins crayons (Version : 1.9.1 [41596]) et champs extras 2 (Version : 1.7.1 [41980]) sous IE8 uniquement.
    Lorsque j’utilise les crayons sur des champs « normaux », pas de souci, mais lorsque j’essaie de modifier le contenu de champs extras... Alors problème sous IE8 (et 7). Testé sous Mozilla, Chrome, Safari, là, il n’y a pas de problème.
    Le problème se traduit ainsi : double-clic sur le champ à modifier, validation, alors au lieu d’afficher la page avec le champ modifié, j’obtiens une page blanche avec un texte du type :

    {"$erreur":"","wid4ce65d22f2d784_12697063":"Bordeaux 2"}

    (en essayant de changer « Bordeaux » en « Bordeaux 2 »)
    Malgré tout, quand je reviens sur la page, les modifications sont prises en compte...
    C’est donc essentiellement un problème d’esthétique et d’ergonomie.

    En fait, dès que la souris passe au dessus d’un champ extra éditable via les crayons, un petit triangle jaune apparait en bas à gauche de la barre d’état : Erreur sur la page
    (je précise que mon code html est conforme au W3C)

    Détails de l’erreur de la page Web
Message : Cet objet ne gère pas cette propriété ou cette méthode
Ligne : 4114
Caractère : 1
Code : 0
URI : http://localhost/site/spip.php?page=crayons.js

    Testé également sur un serveur distant avec le même souci.
    Je crois comprendre que le problème est lié à un fichier javascript (jquery.js ou jquery.form.js) mais je suis incapable de le résoudre.

    Suis-je le seul à rencontrer ce type de problème ? Et quelqu’un a-t-il une idée pour le résoudre ?

    Répondre à ce message

  • 1
    .-.

    Bonjour,
    avez-vous déjà vu des problèmes de compatibilité avec ckeditor ?
    merci d’avance

    • Roberto

      Effectivement, j’ai rencontré un problème moi aussi sur un Spip 2.1.2.
      Lorsque je modifiais un champ, par exemple le soustitre, alors le contenu du champ texte (sur lequel s’appliquait le plug-in ckeditor) disparaissais. Et en fait, pareil en modifiant tous les champs.

      La seule solution que j’ai trouvé : désactiver ckeditor.

    Répondre à ce message

  • 10
    Olive

    Bonsoir,

    j’utilise spip 2,0,10 et le plugin crayons fraichement téléchargé.
    Pb : seul admin (le ouéb master, auteur 1) a la possibilité d’utiliser le crayon.
    Comment faire en sorte que tous mes visiteurs authentifiés et auteurs aient accès à ces fonctionnalités ?

    Bien cordialement
    Olive

    • Olive

      Je suis la seule à qui ça arrive ?

    • Cerdic

      Les crayons apparaissent pour ceux qui ont le droit de modifier un contenu, exactement comme dans l’espace privé. Si un visiteur authentifié n’a pas le droit de modifier un contenu dans ecrire/ il n’aura pas accès aux crayons.

      Pour personnaliser les droits de modification il faut utiliser l’API autoriser() de SPIP

    • Olive

      La problème est bien là. J’ai créé un article avec un auteur de test. Cet article est publié. Mais l’auteur de test (qui est l’auteur de l’article) n’a pas accès à la modif via le crayon. Par contre l’admin l’à. Étrange n’est ce pas ?

      Mais merci pour l’API autoriser_*, ça servira ;)
      Après la découverte de #SET, #GET et #ARRAY... Quelle journée riche !

    • Olive

      Je désespère. Seul admin a le droit d’utiliser les crayons. Les auteurs des articles doivent passer par l’interface privée.

    • Fil

      Ce que tu cherches à faire, Olive, se trouve dans le plugin Autorité http://www.spip-contrib.net/Le-plug..., il faut autoriser les rédacteurs à modifier leur article.

    • Olive

      Merci fil, je test au plus vite

    • Olive

      Super Fil, merci ça fonctionne pour les articles.
      Comment faire en sorte que ça fonctionne aussi pour les résultats de Forms et tables ? (càd que si un visiteur répond à un sondage, il puisse modifier sa réponse depuis l’espace public)

    • Thomas Weiss

      Bonjour Olive,

      As-tu réussi à faire fonctionner Crayon sur les données générées par Forms et Tables ?
      Je cherche aussi la solution...Cdlt, Thomas

    • Thomas Weiss

      Comme mentionné sur la zone, j’ai mis le code suivant pour pouvoir éditer mes Tables :

      BOUCLE_f(FORMS)>
<BOUCLE_champs(FORMS_CHAMPS){id_form}{tout}>
<dt>#TITRE</dt>
<dd>#AIDE</dd>
<small>
<BOUCLE_repo(FORMS_DONNEES){tout}{", "}>[#CHAMP: <span class="crayon
forms_donnees-#CHAMP-#ID_DONNEE">(#LESVALEURS{"-"})</span>]</BOUCLE_repo>
</small>
</BOUCLE_champs>

      Ou encore celui de Cédric

      <BOUCLE_donnees(FORMS_DONNEES){id_article}>
<BOUCLE_champs(FORMS_DONNEES_CHAMPS){id_form}>[#TITRE:<span 
class='#_donnees:EDIT{#CHAMP}'>(#LESVALEURS)</span><br/>]</BOUCLE_champs>
</BOUCLE_donnees>

      Les données s’affichent bien, les crayons aussi mais l’édition ne fonctionne pas (le champ input généré en JS est vide.)...

    • Thomas Weiss

      OK il y avait une faute d’orthographe sur le nom de la classe (forms_donnees au lieu de forms_donnee) et du coup le controleur correspondant ne s’affichait pas... Tout fonctionne parfaitement maintenant SAUF... pour les fichiers joints : le controleur s’affiche bien mais la mise à jour ne fonctionne pas.
      J’ai eu beau triturer le code je ne comprends pas comment forms_crayons.php gére la mise à jour des fichiers joints. J’ai l’impression que justement cela n’est pas encore possible ? Cdlt. Thomas

    Répondre à ce message

  • 2
    Pierre Vaudrey

    Y a-t’il des actions particulières pour utiliser crayons avec Champs extras 2 ?
    Je peux éditer les champs d’un article mais pas les champs extras : seuls les boutons Enregistrer, Annuler apparaissent.

    Merci d’avance.

    Pierre

    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