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
Salut,
Quand on modifie un commentaire avec les crayons, la balise DATE_MODIF n’affiche rien.
Est-ce normal ?
Répondre à ce message
Bonjour
Ce n’est pas un pb mais une surprise :
sans que j’ai ajouté de class=Edit, tous les textes descriptifs des images de mes articles sont éditables par le crayon.
Comment cela se ferait-il ?
Merci
En effet les modèles standards d’insertion des documents comprennent les
class="#EDIT{…}"qui produisent ce fonctionnement.Est-il possible de désactiver ou de modifier ce fonctionnement ?
Car, dans un tableau par exemple, cela produit un
de 350 px alors que je ne veux allouer que 100 px.
Comment faire ?
Merci
heu, ca c’est pas lié aux crayons, mais au modèle standards. Cf http://core.spip.org/issues/2763
La solution en attendant le changement : surcharger les modèles standards.
Répondre à ce message
Proposition : je trouve dommage que dans la partie uploader on ne puisse modifier le nom du doc. J’ai surchargé mes squelettes pour pouvoir les changer avec un EDITDESCRIPTIF et EDITTITRE_DOC, mais la solution ne marche que s’il y a déjà un titre (si pas de titre, on ne peut le modifier).
Pour changer cela, j’ai modifié plugins/auto/crayons/v1.16.2/modeles/uploader_liste.html
devient
A priori cela à l’air de marcher. Je ne suis pas un pro de spip, donc je ne me propose pas pour peaufiner l’idée. Mais si quelqu’un se sent de vérifier l’astuce, je pense que cela pourrait rendre service à beaucoup de personnes.
Répondre à ce message
Bonjour à tous,
C’est juste un petit détail, mais quand je déclare gzip dans le htaccess, il n’a pas l’air de fonctionner sur le crayon. C’est grave docteur ?
Pour info, je met ça, ça speed sien le site avec un petit expire header en plus
Répondre à ce message
Voici que lorsqu’on a un texte spipé, avec retour ligne en _, la correction par le crayon annule l’effet du retour chariot.
Ex :
« Laverie
Affaires maritimes : »
devient
« Laverie _Affaires maritimes : »
même si à l’affichage de l’édition on a bien :
« Laverie
Affaires maritimes : »
Merci
Répondre à ce message
Bonjour
Le Crayon est un outil formidable.
Mais je rencontre un pb avec les #Titre dans un href.
Si je mets un span #EDIT juste avant le titre, ou un class #EDIT, c’est le lien href qui est pris en compte lors du clic et non le désir d’éditer.
Comment résoudre ce problème ?
Merci
ADB
Hmm pas d’idée sur la résolution de ce problème ?
Essaie de mettre le class=#EDIT dans un SPAN entourant le A.
De même, le code suivant :
<span class="#EDIT{titre}">#TITRE</span> <span class="#EDIT{chapo}">[- (#CHAPO|PtoBR)]</span>ne permet que d’éditer #TITRE et pas #CHAPO
Comment faire ?
Merci
Oups, désolé...
Ca marche.
En revanche, je reviens au problème d’un lien href.
L’écriture :
<a href="#"><span class="#EDIT{titre}">#TITRE</span> <span class="#EDIT{chapo}">[- (#CHAPO|PtoBR)]</span></a>envoie sur le lien et pas au crayon.
Je ne sais pas comment faire. Il faudrait une priorité ou un clic droit...
Merci
je t’ai répondu ci-dessus
Eh bien non, désolé, mais
<span class="#EDIT{nom_site}"><a href="#URL_SITE">(#NOM_SITE)</a></span>renvoie sur l’url et ne permet pas d’éditer.
Un autre petit pb, mais j’ouvre une nouvelle question
Répondre à ce message
Est-il possible, à l’aide de crayon de modifier les champs d’une table d’une base de donnée externe. Je m’explique :
Grace à la boucle DATA, j’affiche les infos d’une base externe. J’aurais aimé pouvoir modifier ces infos grâce au plugin crayon. Est-ce possible ou faut il que je parte sur une autre piste ?
Merci d’avance !
La boucle DATA ne permet pas au crayon de savoir par quel biais il pourra enregistrer les données. Mais si tu composes à la main la classe nécessaire, cela devrait pouvoir être possible. Il va falloir tâtonner un peu.
Merci pour cette réponse. Que veux tu dire par : « composer à la main » ?
Avec la boucle DATA la balise
class="#EDIT{champ}"des crayons ne saurait pas quoi répondre. Mais si tu mets toi-mêmeclass="crayon forum-texte-469112", alors les crayons savent qu’il faut éditer le champ texte de la table des forums, pour forum dont l’identifiant est 469112.Les crayons peuvent aussi modifier des bases distantes si on les renseigne correctement. Si je me souviens bien, la bonne forme est
class="crayon connecteur:table-champ-id".Merci ! y’a du mieux, sauf que j’obtiens un pop-up du type
table id champ : pas de valeursdans les logs j’obtiens :
basespip.champ_distant doesn't exist - SHOW CREATE TABLE <span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+Y2hhbXBfZGlzdGFudDwvY29kZT4="></span>le connecteur ne semble pas pris en compte
essaie peut-être de remplacer le : par un double underscore __
du moins si j’en crois le code là : http://zone.spip.org/trac/spip-zone...
Si ça fonctionne, c’est le commentaire de cette ligne 234 qui m’a induit en erreur, et il faudra le corriger.
Génial ! Merci beaucoup pour ton aide.
_Donc voici mon code pour modifier un champ d’une base distante :
Encore merci !
Je remarque que les champs qui contiennent des caractères spéciaux (accents, apostrophe, etc..) ne peuvent pas être édité.
Lorsque je double clic sur le texte, le texte s’efface.
Mes tables distantes sont en UTF8
J’ai dû modifier le Jeu de caractères du site pour faire en sorte que cela fonctionne, je l’ai passé en iso-8859-1
Normalement, la bonne solution serait de demander une connexion utf8 dans le fichier de connexion. Car par défaut les connexions se font en iso-latin, ce qui peut expliquer ton souci.
Effectivement ! c’est mieux comme ça.
Merci !
Répondre à ce message
Bonjour,
Vraiment une superbe contrib ces crayons ! bravo.
Je voudrais « crayonner » les adresses et les numéros du plugin coordonnées pour un visiteur !
Si je dois mettre une autorisation pour les visiteurs, je dois la mettre dans crayons ou coordonnées ? et j’aurais besoin d’un peu d’aide aussi :)
Merci
Répondre à ce message
Bonjour,
Je viens de faire la mise à jour des crayons et j’ai uneFatal error : Cannot redeclare balise_EDIT_CONFIG_dist() (previously declared in /home/riennet/public_html/spip/plugins/auto/cfg/cfg_fonctions.php:86) in /home/riennet/public_html/spip/plugins/auto/crayons/crayons_fonctions.php on line 299
CFG est à jour. Le vidage du cache et l’effacement des fichiers de top n’y font rien... C’est un bug ?
[SPIP 2.1.19]
Voir la discussion : http://contrib.spip.net/Les-crayons#forum465835
(Oupsss envoyé un peu vite : il fallait lire l’effacement des fichiers de tmp (et non pas l’effacement des fichiers de top !)
[Résolu] Effectivement, les choses sont rentrées dans l’ordre après une désactivation puis une réactivation des crayons... Merci (beaucoup) !
Je reviens sur ce point car si c’est bien résolu, euh, oui, mais c’est un peu galère.
Je m’explique : mes sites sont installés dans le cadre d’une mutu SPIP. Du coup, c’est sur chacun des sites sur lesquels les crayons étaient installés que la fatal error apparait. La seule solution que j’ai trouvée c’est de :
Du coup, ça commence à devenir un peu galère quand il commence à y avoir pas mal de sites mutualités. Y-aurait-il une façon de faire plus simple, qui règle le soucis d’un coup sur l’ensemble des sites mutualités ?
Répondre à ce message
J’étais déjà venu ici il y a très longtemps, et je viens toujours pour la même raison…
Depuis des années, je ne peux plus utiliser de version supérieure à la 1.9.1 sur aucun de mes sites. Peu importe l’hébergement, la version de spip, les autres plugin, bref ces sites n’ont absolument rien en commun à part le fait d’avoir été créé par moi. Sur un aucun d’entre eux Crayons ne fonctionne si je mets à jour dans une autre version que la 1.9.1…
Le soucis c’est que le passage en SPIP3 devient de plus en plus pressant, et là, plus moyen d’utiliser Crayons. Le plugin est bien activé, aucune erreur nulle part à ma connaissance. Mais rien à faire, le petit logo n’apparaît plus au survol, les double-clic sur le texte ne font rien…
J’ai envie de dire MAIS WTFFFFF PUTAIN ?!?
WOW.
J’ai réussi à le faire fonctionner sur un site… où je n’en ai pas besoin (vous la sentez l’ironie là ?).
Je remarque donc que le code source m’affiche ceci :
<div class="crayon article-texte-13 crayon-init crayon-autorise" style="visibility: visible; ">Alors que sur les sites où cela ne fonctionne pas, cela n’affiche que :
<div class="crayon article-texte-15 ">Il manque tout un bout du code. C’est lié à votre avis ?
ces classes s’ajoutent dynamiquement quand le javascript des crayons est exécuté ; visiblement chez toi le js soit n’est pas chargé, soit ne fonctionne pas
Qu’est-ce que je pourrais faire pour tester ?
Il faut que tu regardes dans la console de debug de Firefox, si le JS charge, ou si une erreur s’afffiche
Non rien du tout dans la console, c’est ça qui me perturbe…
J’ai ce même problème avec spip 3.0.5 et crayons 1.15.2
entre parenthèse, je ne sais pas si CFG est essentiel, mais il ne me l’a pas installé en même temps que crayons...
Quand je regarde le code source du site où les crayons en 1.15 ne fonctionnent pas, la class de la div est carrément vide maintenant…
Donc au lieu d’avoir avant
<div class="crayon article-texte-15 ">j’ai
<div class=" ">Zuper.
Personnellement, en désactivant mon thème, le crayon apparait bien.
Le problème viendrait donc plutôt d’un thème, ou d’autres usages de javascript...
je me répond à moi-même : en mettant à jour mes plugins (mais ni crayons, ni cfg qui étaient déjà à jour), en désactivant les options du Crayons et en les ré-activant, le Crayons marche.
Mais je ne comprend pas pourquoi !
Désactiver les options, vous voulez dire quoi par là ? Tout décocher via cfg ?
oui, via cfg.
j’ai tout décoché, désactivé mon thème.
Après essai : ça marchait
j’ai réactivé le thème, puis recoché toutes les options une à une, pour voir laquelle faisait planter crayons, mais... finalement, ça marchait avec toutes les options...
J’essaierais pour voir, même si je n’utilise pas de thème, tout est fait main.
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 :
|
