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
onAjaxLoadde 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 estspip_xxxs. - pour la table spip_meta qui ne propose pas ce type d’index numérique, il faut utiliser la balise
#EDITd’une manière un peu différente en préfixant le champs à éditer parmeta-, 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
MEDIUMTEXTou plus long, les crayons affichent unTEXTAREA, et sinon, unINPUT. - 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 !
Discussions par date d’activité
303 discussions
Bonjour,
Quequ’un a t-il réussi a utiliser ce plugin avec les champs exra ou même le plugin champs homonymes ?
Merci d’avance
A priori ça ne sait pas gérer les champs extra ; n’hésite pas à proposer un patch !
Répondre à ce message
Avec la version 0.6 des crayons, la
classde la div qu’on crayonne est envoyée à la vue, qui peut donc faire des choses paramétrables depuis le squelette.A titre d’exemple il suffit de transformer
<div class="#EDIT{texte}">en
<div class="#EDIT{texte} imagereduire.520">pour que le filtre
|image_reduire{520,0}soit appliqué.Pour voir comment c’est fait (très simple), il suffit d’ouvrir le mini squelette
plugins/crayons/vues/article_texte.htmlEnjoy :)
Répondre à ce message
voilà, je viens découvrir ce magnifique plug-in et j’essaye de le mettre en oeuvre ... mais voilà. En tant qu’administrateur, je peux modifier toutesl es zones éditables de ma page mais dès que je me logue comme un simple rédacteur, ça ne fonctionne plus ....
Qu’ai-je oublier de faire ????
Merci pour ce très bel ouvrage !
Les crayons respectent les autorisations de SPIP, qui font qu’un rédacteur ne peut pas modifier quelque chose qui est publié sur le site.
Ce que tu veux, c’est donc modifier les autorisations ; il n’existe pas encore de plugin prêt à l’emploi pour ça (c’est en projet, mais pour quand quelqu’un trouvera le temps & la motivation).
En attendant des exemples de code à copier-coller dans mes_options sont donnés sur la doc du squelette « Gribouille ».
Merci pour la rapidité de la réponse ! En effet, c’est logique..... bon, je m’en vais de ce pas voir les modifications de Gribouille !
Répondre à ce message
chez moi crayons désactive le plugin boutons d’administration supplémentaire
comment faire
Répondre à ce message
Bonjour,
J’ai un problème pour faire fonctionner crayons sur un article.
J’utilise le squelette Egt qui contient la balise #INSERT_HEAD
J’ai mise à jour Spip (1.9.2a), j’ai nommé mon squelette : article=20.html dans lequel j’ai inséré cette ligne :
Rien ne se passe ! Cela est-il du au fait que le plugin-squelette egt est compatible 1.9.1 mais pas forcément 1.9.2 ?
Si quelqu’un a une idée... Sinon, chapeau à ceux et celles qui font progresser JQuery et Spip.
Apparemment, tu as le plugin jquery, il ne le faut pas ! jQuery est d’office dans la 1.9.2 ...
De toute façon, crayons n’utilise pas insert_head mais s’insère tout seul.
Regardes ce que te dit ta console javascript.
Sinon, difficile de vérifier sur ton url, en public, on a pas les droits.
Aussi, tu as une double barre dans (#TEXTE|justifier||reduire_image570,0) ... ça va pas le faire.
Répondre à ce message
Super contrib.
J’ai juste une petite question pourquoi les variables du nom des tables « $table_prefix » n’ont pas été utilisés dans le code mais taper en dur. spip_.
perso j’ai renommé la variable $table_prefix pour mettre plusieurs sites spip.
foreach ($catab as $categ => $catinc)
include_spip($catinc) ;
if (isset($GLOBALS[$categ][’spip_’ . table_objet($table)][’field’][$col]))
$brut = $GLOBALS[$categ][’spip_’ . table_objet($table)][’field’][$col] ;
break ;
A moins que je me plante ?
C’est parce qu’on utilise spip_query() qui sait transposer le préfixe des tables
Répondre à ce message
Bonjour,
Je vais une créer une table supplémentaire sur spip dans laquelle je vais stocker des stats.
Je veux l’interroger avec les boucles spip. Ca je sais que c’est possible.
Ce qui serait encore plus génial, ce serait que je puisse utiliser ce plugin pour pouvoir modifier le contenu de cette table directement par les visiteurs enregistrés du site.
Est-ce possible ?
Cordialement.
Répondre à ce message
Hello
J’utilise le plugin crayon dans les forums, et j’ai un petit souci :
Si j’édite un message ou son titre, le nom de l’auteur disparait au profit du mien. Alors que mes corrections ne concernent que des TITRES EN CAPITALES ou des bourdes dans les liens, j’aimerai que l’auteur du message reste à l’identique et ne change pas. Est-il possible d’afficher le nom de l’auteur originel après modification ? ...et éventuellement le nom du correcteur ou s’il y a eu correction ?
Je suppose que tu utilises une
<BOUCLE_a(AUTEURS){id_auteur}>pour afficher les auteurs des forums ? Si c’est le cas en effet tu vas te retrouver avec l’id_auteur du correcteur du forum.Tu devrais plutôt utiliser les balises #NOM et #EMAIL (comme dans la dist/) car elles ne sont pas modifiées par les crayons.
Si tu veux aller chercher l’id_auteur d’un forum modifié, c’est possible avec des boucles : il faut aller chercher le forum ayant pour id_parent l’id_forum que tu veux afficher, et le statut « original » (si le forum a été corrigé, ce parent existe et est unique).
J’utilise les deux : d’une part si l’auteur est connecté alors on affiche son nom et son logo de connecté, sinon on affiche le nom qu’il a bien voulu laissé dans le form. Et c’est effectivement avec un id_auteur que j’ai le souci.
Heu ... je ne suis pas certain d’avoir tout à fait saisi quant à ce qu’il fallait aller chercher. Quand le forum original est corrigé alors il possède un parent. Et c’est dans ce forum parent que je dois retrouver mon auteur original. C’est bien ça ?
Non, c’est dans un forum fils (une « réponse ») portant le statut ’original’
En d’autres termes :
(non testé, cependant)
Cela fonctionne bien. Merci Fil.
en passant...
Si tu modifies un message de forum je ne vois pas pourquoi tu laisserais le nom de l’auteur original... ou alors tu rajoutes « corrigé par... » Sinon, pourquoi pas modifier également le sens du message si il ne te convient pas... à mon avis un forum, on modère et on le dit , mais on ne corrige pas !!!! ça ne se fait pas. Si tu veux corriger un propos, fais le en répondant au message erroné selon toi...
Cordialement,
Thierry
Tout dépend de l’usage ; si ton forum sert par exemple de site de petites annonces, ou si tu dois supprimer le numéro de téléphone laissé par mégarde, ou corriger l’orthographe...
Répondre à ce message
C’est vraiment intéressant (même génial !!!), installation sans problème avec la version 1.9.2 de spip, j’aurais quelques petites questions pour adapter à mon squelette :
- comment faire pour agrandir l’image du crayon qui apparaît lors du survol du titre (ou article...), ou bien modifier l’emplacement (genre avant le titre ou le texte) ? (ceci à cause d’un bloc bleu sur la gauche de l’article qui rend quasiment invisible le crayon)
- je n’arrive pas à le faire fonctionner pour les messages de forum ? (est ce qu’il faut le plugin de gestion des droit des administrateurs, ou ce n’est pas
#EDIT{titre}qu’il faut utiliser...)- est ce que ce plugin peut s’insérer directement dans un squelette (ou est qu’il sera directement intégré dans les futures versions de SPIP, et dans ce cas patience...)
Merci et a+
Pour ma troisième question, j’ai l’impression que le développement de Gribouille (spikini) va répondre à mes attentes....
ouip ; les deux autres questions, donc :
— pour l’image, tu peux la remplacer par une autre :)
— pour les autorisations d’édition de forum, il faut pour l’instant passer par une ligne de code à ajouter dans ecrire/mes_options.php :
en attendant un éventuel plugin
Répondre à ce message
Bonjour,
je vais sans nul doute poser une question idiote, mais j’ai installer le plugin sur mon site en spip 192, et en l’activant, je n’obtiens que des pages totalement blanche et désespérement vide, et cela même avec les squelettes dist de spip 192. Les pages se réaffichent dès que je désactive crayons dans les plugins.
Ma question idiote, la voilà ; est-ce normal ?
j’ai oublié de signer ma question idiote.
Alexis
Hi hi, bien sûr que non, ce n’est pas normal. Essaie de réinstaller le plugin, il a dû y avoir un problème lors du transfert. Sinon regarde dans les messages d’erreur du serveur si tu y as accès, ils devraient donner une indication.
Je n’ai aucun message du serveur c’est bien mon soucis. Je vais nettoyé le plugin et recommencer à zéro.
C’est bien moi qui suis en cause. J’ai dézippé crayon sur MacOS 9. Apparemment cela pose des problèmes. Tout revient dans l’ordre quand je dézippe sur MAcOSX !
Eventuellement, regardes dans tmp/spip.log et ses anciennes révisions
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 :
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.
Suivre les commentaires :
|
