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 estspip_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 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
MEDIUMTEXT
ou 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
[18:32] YannX ah ! meme sur SPIP.net on se prend des erreurs qd on visualise deux fois un meme article en privé ?
[18:33] YannX je croyais que c’etait juste un« bug expérimental » de crayons (sur mes sites)
[18:33] YannX mais non !
[18:33] YannX FF fenetre 1 = je regarde un article
[18:34] YannX FF fenetr2 = car je vais le modifier dans une seconde fenetre
[18:34] YannX que j’enregistre
[18:35] YannX puis fenetre1 = je rentre en edition (article_edit)
[18:35] YannX je veux enregistrer !! ...... erreur car page déja modifiée
[18:36] YannX oui, compris !
[18:36] YannX c’est l’avertisseur de travail collaboratif qui se melange les pinceaux (pourtant cela marchait tres bien en SPIP 2 / 2.1 )
(qui avait dit que c’etait « expérimental » ;-)
PSje n’ai pas testé sur deux ordis derrière la meme box...
Répondre à ce message
Bonjour,
Merci pour crayons. Un petit problème : sur tablette, le double-clic est très souvent « sur-interprété ». Pourrait-on détecter les tablettes et faire un traitement spécial ?
Merci, cordialement, Ch.M.
Répondre à ce message
Est-ce vraiment un bug de Crayons ? pas absolument, mais j’observe depuis trop souvent un fonctionnement gênant en utilisant Crayons dans l’espace privé (expérimental, je sais !! ).
Concrètement, j’identifie deux comportements bizarres en hébergement distant (OVH en particulier) :
Exemple de Crayons 1.21.0 - stable sur spippourlesnuls.fr( en SPIP 3.0.17 [21515])...
_ (mais il y a tellement d’autres plugins utilisés...).
D’autres spipeurs auraient-ils rencontré ce genre d’incidents ?
Merci
YannX
Répondre à ce message
Actuellement j’ai aussi un message d’erreur :
La page à l’adresse (censurée sur demande de lio) indique :
Erreur de communication : Unexpected token <
Peut-être est-ce du aux url arborescentes…
Répondre à ce message
Je cite :
« On peut également éditer les logos avec le crayon #EDITlogo ; un réglage permet de redimensionner ces logos à la volée lors de l’upload. »
- > J’aimerai connaitre comment activer le redimensionnement à la volée de ses logos lors de l’upload SVP ??
Répondre à ce message
J’ai le message suivant et les Crayons ne fonctionnent pas :
erreur de communication : JSON.parse : unexpected character at line 1 column 1 of the JSON data
Version : 1.21.0 SVN [85713] avec SPIP 3.1.17
Répondre à ce message
Bonjour Fil,
Les crayons ne fonctionne plus dès lors que je les utilise avec le plugin CookieChoices. Pourtant je suis bien logué comme administrateur et ai validé les cookies. CookieChoise bloquerait Crayon ? A voir sur http://art-logic.info
becs.
Répondre à ce message
Bonjour,
Les Crayons ne fonctionnent plus lors de l’activation des URL Arborescentes. Gérées avec OU sans le Couteau Suisse. Sur les pages Articles et Rubriques, j’ai le message « erreur de communication : JSON.parse : unexpected character » . Par contre, si j’ajoute #EDIT dans d’autres squelettes (sommaire / plan / squelettes custom), ça fonctionne bien (squelettes de type : monsite.com/spip.php ?page=XXX)
En désactivant les URL arbo (->standard), ça fonctionne à nouveau... J’ai activé / désactivé le « Comportement du couteau ». J’ai désactivé tous les autres plugins, vider les caches, Rien n’y fait. Je n’arrive pas à trouver le problème... Quelqu’un aurait une piste de solution ?
(Site et plugins à jour : SPIP 3.0.16 / Crayons 1.19.2)
Merci pour votre aide.
François
Répondre à ce message
Bonjour,
tout d’abord merci pour ce plugin fantastique ! Il simplifie énormément la mise à jour des articles, rubriques etc et permet de facilement corriger les petites fautes de frappe sans avoir à faire des allers-retours entre espace privé/public. Bref j’adore ce plugin !
J’utilisais avec bonheur la version 1.9.1 de Crayons sous SPIP2.1.2. Le site va désormais passer sous SPIP3.0 mais voilà que j’ai un petit souci avec Crayons 1.19.2 avec SPIP2.1.26 et SPIP3.0 : en local, en activant uniquement le plugin Crayons, quand j’appuie sur « enregistrer » pour enregistrer les modifications effectuées dans le texte, j’ai une fenêtre qui s’ouvre et me propose d’ouvrir ou d’enregistrer le fichier spip.php. Bizarre ! Une idée de ce qui peut bien se passer et comment résoudre ce problème ?
Merci d’avance pour votre aide !
il faut vérifier dans les logs, ça ressemble à une erreur serveur (code 500 ?)
Merci pour votre répons très rapide !
De quel log parlez-vous ? Rien dans ceux de SPIP
une erreur 500 est parfois plus dure à tracer : à priori il faudrait chercher dans les logs d’apache (error.log)
Voilà l’erreur qui pourrait correspondre dans error.log d’apache, aucune idée de si c’est de là d’où vient le problème :
[Mon Jun 30 15:32:41 2014] [error] [client ::1] File does not exist : C :/mon/repertoire/spip/win_width.htc
non ce n’est pas ça … il faut peut-être essayer en ligne plutôt qu’en local ?
Effectivement, en ligne serait mieux qu’en local, mais je ne suis malheureusement pas en mesure de convertir mon site en ligne pour l’instant. Je vous joins l’impression d’écran de mon erreur au cas où cela vous inspire plus, sinon je vous recontacterais une fois le site en ligne (avec un peu de chance l’erreur aura disparu toute seule).
Merci pour votre aide
Répondre à ce message
Bonjour,
Comment dois-je procéder pour qu’un champ pays_livraison se comporte comme le champ pays dans les crayons (c’est à dire avec la liste des pays en menu déroulant) pour une utilisation, donc, avec
#EDIT{pays_livraison}
.Auriez-vous un exemple de contrôleur de pays (si c’est bien de cela qu’il s’agit) ? Et est-ce que la création de ce contrôleur suffit à ce que j’obtienne le comportement souhaité ou y a-t-il autre chose à faire ?
Grand merci.
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 : |