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 !

Voetnoot

[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

    Bonjour,

    Je reviens (au cas où) avec un problème avec crayon (SPIP 1.9.2) qui m’empêche de l’installer en prod.

    En production sur le serveur (pas en local) lorsqu’on clique sur le crayon de la zone à modifier, la fenêtre s’ouvre avec le texte original tronqué à partir du premier caractère accentué. Et les boutons „OK” et „ANNULER” ne s’affichent pas non plus. (En examinant la source de la page html, le texte est bien présent et au complet...)

    Exemple : un commentaire de forum qui contiendrait : „Merci d’avoir répondu si vite”, en cliquant sur le crayon, la fenêtre de modification n’affiche que „Merci d’avoir r” —> plus rien après le premier caractère accentué.

    Une idée ?

    Merci.

    • J’ai eu le même problème que j’ai résolu en modifiant le squelette pour ne plus être dans une boucle CONDITION.

    • J’ai finalement résolu le problème à force de faire des tests, mais je ne saurai pas dire comment exactement !

    Op dit bericht reageren

  • 6
    Philippe

    Bonjour,

    Je viens de passer un de mes sites en Spip 2.1.8 avec le dernier squelette SarkaSpip. Je constate un comportement inhabituel des crayons.

    L’update du texte est bien réalisé mais le formulaire ne semble pas ajaxé dans la mesure ou il me faut recalculer la page pour que les modifications apportées soient visibles.

    Une idée ?

    Merci

    Philippe

    • Ce petit dysfonctionnement a été corrigé il y a peu de temps; vérifie que tu as bien mis à jour les crayons.

    • Philippe

      Bonjour Fil,

      Merci pour cette réponse rapide. Ma version des crayons est la dernière : Version : 1.9.7 [45706]. J’ai ce problème seulement sur un de mes site.

      Un autre site utilise la version 1.9.3 [42843] des crayons et celle-ci fonctionne bien chez le même hébergeur (Infomaniak - Genève).

      Serait-il possible qu’un autre plugin soit responsable de ce phénomène ? Il n’est pas bloquant aussi je vais creuser la chose petit à petit à moins qu’une bonne âme n’ai la réponse.

      Les librairies installées sur ce site sont :

      -  JavaScriptPacker dans : plugins/auto/crayons/lib/
      -  JavascriptPacker dans : extensions/compresseur/lib/ de taille idem
      -  farbtastic_1_3_1 dans : lib/
      -  jquery-ui-1.8.9 dans : lib/
      -  safehtml dans : extensions/safehtml/lib/

      Il y a donc redondance de JavaScriptPacker. Je précise que mon installation de Spip est celle de la distribution standard (avec spip_loader.php). Je n’ai pas encore remis mes modèles et modifications personnelles du squelette.

      Le comportement est identique sous Chrome, IE et Firefox.

      Il y a une gomme sur le crayon. yop yop !!

      Ceci dit, la version des crayons sur Spip-contrib est totalement opérationnelle. C’est très probablement mon environnement qui est en cause.

      Merci
      Philippe

    • Philippe

      un up :

      La désactivation des autres plugins un par un de semble pas résoudre mon souci.

      Fil, si ça peux t’aider dans le développement du plugin, je peux te donner mes identifiants de connexion d’administrateur de mes deux sites et les identifiants FTP.

      Philippe

    • Oui, OK : fil@rezo.net

    • Bonjour,

      Pour terminer ce fil (ouaf ouaf !!), si une petite modification du plugin était à faire, le souci venait de mon côté avec la présence dans un article d’un JavaScript de rédaction totalement obsolète.

      La mise à jour du plugin et le déplacement de ce script en pied de page ont résolu le problème. Merci Fil.

      Philippe

    • J’ai le même problème. avec un spip 2.1.8 [16966] et les crayons 1.9.8 [45932]

      Qu’est-ce que tu appelles un javascript de rédaction ?

    Op dit bericht reageren

  • Bonjour à tous et toutes.

    J’ai utilisé en duo le plugin crayon et le plugin autorité.

    Ça marche nickel. mais les articles qui ne sont pas changeables par les auteurs font apparaitre : „article XXX : Not allowed” tout en laissant le crayon visible.

    Malgré mes recherches, je n’ai pas trouvé de mention de ceci.

    Quelqu’un-e saurait comment enlever carrément le crayon, dans le cas où il n’est pas utilisable ?

    Bonne journée à tous et toutes.

    Op dit bericht reageren

  • 1
    Renée Picard

    Sur un SPIP 2.1.8, j’ai installé le plugin crayon pris sur SPIP contrib
    car celui avec auto ne fonctionnait pas.
    J’ai vérifié dans mon squelette et j’ai les bonnes classes:

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

    J’ai configuré par CFG le plugin (je le vois au privé)
    Il ne se passe rien dans la partie publique!
    Présentement le site est coché en travaux!

    plugins activés sur le site:
    acces restreint
    highslide
    jsscrollpane
    spip bonux
    agenda
    cfg
    couteau suisse
    Changez de navigateur

    J’ai testé en décochant site en travaux et en désactivant tous les plugins un à un.
    Lorsque je regarde le code source je vois bien le javascipt de crayons.
    Que faire
    Merci

    RP

    • Renée Picard

      Pour faire suite au post précédent je dois ajouter que j’ai un dossier js ayant menu.js qui fait afficher un menu dépliant avec un clic.

    Op dit bericht reageren

  • Bonjour a tous,

    J’essaye de mettre en place le plugin crayons sur les commentaires des articles. Mais impossible de le faire fonctionner.

    voici mon code :

    [<div class="#EDIT{texte}">(#TEXTE|lignes_longues)</div>]

    qui dans le code source me donne bien ce qu’il faut :

    <div class="crayon forum-texte-1673 "><p>test................</div>

    le plugin me modifie bien le nom de la class du champ div mais il ne charge pas le javascript.

    Pourtant dans les logs j’ai bien

    autoriser(’modifier’, forum, 1673, NULL, array(’champ’=>texte))

    Donc pour moi il devrait etre modifiable mais rien. Et dans le code source de la page html impossible de trouver une trace de javascript provenant du plugin.

    Par contre quand je fait la même manip sur le texte de l’article. Tout fonctionne bien.

    Quelqu’un a t il une idée?

    Merci.

    Op dit bericht reageren

  • Bonjour,
    suite à une mise à jour vers la dernière version de spip, le plugin Crayons ne fonctionne plus. J’ai installé la version la plus récente du plugin sans succès. Désinstaller tous les plugins sauf Crayons sans succès.

    Voici ce que m’indique les logs:
    -  je lance une action du crayon visible dans la log crayons_distant.log avec le pid 13071
    Feb 03 06:35:42 82.66.75.246 (pid 13071) autoriser(’crayonner’, article, 156, NULL, array(’modele’=>)

    -  dans spip.log j’observe pour ce pid:
    Feb 03 06:35:42 82.66.75.246 (pid 13071) spip_register_globals(1)
    Feb 03 06:35:42 82.66.75.246 (pid 13071) autoriser(’crayonner’, article, 156, NULL, array(’modele’=>)
    Feb 03 06:35:42 82.66.75.246 (pid 13071) Erreur mysql 1146
    Feb 03 06:35:42 82.66.75.246 (pid 13071) Table ’cheztom.articles’ doesn’t exist - SHOW CREATE TABLE articles
    Feb 03 06:35:42 82.66.75.246 (pid 13071) Erreur mysql 1146
    Feb 03 06:35:42 82.66.75.246 (pid 13071) Table ’cheztom.spip_article’ doesn’t exist - SHOW CREATE TABLE spip_article
    Feb 03 06:35:42 82.66.75.246 (pid 13071) Erreur mysql 1146
    Feb 03 06:35:42 82.66.75.246 (pid 13071) Table ’cheztom.article’ doesn’t exist - SHOW CREATE TABLE article

    Effectivement, la table spip_article n’existe pas mais spip_articles existe.
    D’avance merci de votre aide.

    Op dit bericht reageren

  • Bon étant donné qu’il m’est impossible de poster sur le forum de spip (erreur 404 à tout bout de champs), je viens demander ici.

    Depuis hier je cherche le moyen pour qu’un simple visiteur puisse crayonner un champs extra que j’ai ajouté aux auteurs. J’ai découvert quelques solutions, mais elles sont soit impossible à mettre en œuvre dans mon cas (trop de visiteurs) soit non-fonctionnelle (en l’occurrence celle-ci qui avait l’air prometteuse).

    Est-ce que la solution se trouverait dans une boucle, dans une fonction autoriser() à créer, autre chose ?

    Op dit bericht reageren

  • 6

    J’aimerai savoir s’il est possible de ne laisser l’utilisation des crayons qu’à UN utilisateur spécifié (en plus du webmestre).

    Merci de votre avis.

    • c’est tout à fait possible

      il faut pour cela utiliser le système de gestion des droits de SPIP.

      Voir http://programmer.spip.org/La-librairie-autoriser

    • Je suis désolé, je ne suis pas sûr d’avoir bien compris.

      À ce que j’ai vu, si un article est accessible en modif par un rédacteur, il peux aussi y accéder via les crayons.
      Mon souhait est que la prise en modif via les crayon ne soit possible que pour un usager donné, les autres devant se contenter de passer par la partie privée.

      Quelle fonction d’autoriser faut-il surcharger pour obtenir ce comportement.

    • a!

      alors oui c’est possible, en conditionnant l’affichage de #EDIT{xxx} par un test.

      -  soit de manière „sale” en faisant : [(#SESSION{id_auteur}|=={xx}|oui)#EDIT{xxx}]
      -  soit on déclarant une nouvelle autorisation (par exemple crayonner) et en utilisant la balise #AUTORISATION.

      La seconde solution est meilleure, plus SPIP et plus maitenanble

    • Je vais m’efforcer d’être propre (j’aurai appris qq chose).
      Donc je vais surcharger la fonction autoriser_crayonner.
      Il faut que je teste l’égalité de $qui[’id_auteur’] avec le numéro d’auteur concerné, pour faire un return true, c’est ça ?

    • a oui, j’avais pas vu que autoriser_crayonner existait déja. Donc oui la surcharger, sans avoir à modifier les squelettes

    • Bon, je reviens sur ce point.
      J’ai bien réussi à limiter l’usage des crayons (par exemple au webmestre), mais le petit crayon apparait toujours au survol de l’article pour ceux qui on le droit d’édition sur tel ou tel article. Bien sûr, le clic dessus déclenche un message modal

      article n: Non autorisé

      , ce qui est très mauvais.
      Comment désactiver l’affichage de ce crayon ?

    Op dit bericht reageren

  • 3

    Bonjour,

    Je viens vous faire part d’un petit soucis avec la dernière mise à jour du plugin (1.9.3 revision 42594) qui a carrément mis HS le plugin sur un de mes sites. J’ai testé avec un autre site, et pareil, Crayons ne fonctionne plus.

    Heureusement que j’ai fait une sauvegarde des versions 1.9.0 et 1.9.1 venant d’autres de mes sites car ces dernières fonctionnent parfaitement.

    Est-ce qu’on peut trouver les versions précédentes pour tester la 1.9.2 ?

    • La dernière version du plugin produit toujours le même problème, je crois être condamné à rester sur la 1.9.1…

    • Si tu ne donnes pas plus de précisions (message d’erreur, version de SPIP...) c’est en effet le risque.

    • Le soucis c’est que j’ai rien de plus à préciser… Il n’y aucun message erreur et le problème était présent en 2.1.2 et toujours en 2.1.8.

      Je pense que ça doit venir d’un conflit avec quelque chose dans la manière dont je code mes sites, parce que il y a ce soucis sur 3 sites que j’ai fait. Et je crois me rappeler qu’à l’époque j’ai testé sans les autres plugins donc ça ne doit pas être un conflit de plugin.

    Op dit bericht reageren

  • 1

    Salut.

    Je lis que le Doubleclick ne se déclenche pas sur un smart-phone. Tapoter deux fois déclenche en général un zoom. Les Crayons ont-il une alternative fonctionnelle sur Smart-phone?

    • Non, mais ça ne devrait pas être dur à coder une fois qu’on aura défini sur quel événement on veut se déclencher.

    Op dit bericht reageren

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.

Wie ben je?
[Aanmelden]

Om je gebruikersafbeelding bij je bericht te tonen moet je je eerst registreren opgravatar.com (gratuit et indolore). Vergeet niet om hier je e-mailadres te vermelden.

Vul hier je commentaar in

In dit formulier kun je de SPIP-codes {{gras}} {italique} -*liste [texte->url] <quote> <code> en HTML codes <q> <del> <ins> gebruiken. Om een nieuwe paragraaf te maken laat je gewoon een paar regels leeg.

Een document toevoegen

Commentaren opvolgen: RSS 2.0 | Atom