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
ça continue à mouliner, quelque soit le squelette (j’ai remis la dist).
avec head, sans head.
je n’y compris rien.
Marc
Répondre à ce message
Le plugin crayons ne marche pas quand je veux modifier le texte d’un message sur plusieurs ligne car spip ajoute des paragraphes. Le crayon n’apparait pas et le double clic n’a aucune action.
Est-ce un bug du plugin crayons ou du squelette ?
Merci
Répondre à ce message
Bonsoir,
Félicitation pour cette contribution qui révolutionne la vie de tous nos utilisateurs !
Je rencontre deux difficultés liées à l’utilisation de ce plugin :
- MOTS CLEFS
Les admins restreints ne peuvent pas modifier les champs de l’objet MOTS sur le site public alors qu’ils peuvent le faire dans l’espace privé (j’ai pour celà installé le plugin autorités). Pour information, les modifications en ligne fonctionnent très bien pour un admin complet.
Dans mot.html :
<BOUCLE_objet(MOTS){id_mot}>[<div class="#EDIT{texte}">(#TEXTE)</div>]</BOUCLE_objet>
- CHAMPS SUPPLEMENTAIRES
J’ai ajouté un champ usage à la table ARTICLES qui est activé dans mes_options.php, rempli et reconnu correctement dans mon squelette.
Au double-clic sur le champ le plugin renvoi l’erreur : article 3 usage Pas de valeur.
Avez vous des pistes pour avancer ?
Un grand merci par avance
Patrick
Pour ce qui est des MOTS CLEFS, c’est peut-être plus lié à autorité, il faudrait que tu donnes plus de détail sur ta configuration , par exemple montrer ce que donne
#CONFIG{autorite}
dans un squelette, même si le dump est un peut cryptique.Pour ce qui est du champ supplémentaire dans la table article, ça devrait marcher normalement. Peut-être te manque-t-il une définition. Pourrais-tu montrer comment tu l’as fait dans mes_options.php ?
A ce sujet, je dois dire que j’ai limité ces champs supplémentaires au tables définies complètement à la manière spip mais je me rend compte que ce ne serait pas nécessaire. SPIP fournit en effet tout ce qu’il faut pour reconnaitre les tables non déclarées. Nous risquons donc de relacher un peu le modèle. Je dis ça, mais ça ne s’applique peut-être pas aux extensions de tables natives spip pour lesquelles il restera peut-être nécessaire de les définir complètement. A suivre donc ...
Merci pour ta réponse rapide ;
- MOTS CLEFS
Voici ce que renvoit
#CONFIG{autorite} : a:20:{s:18:"auteur_mod_article";N;s:19:"auteur_modere_forum";N;s:22:"auteur_modere_petition";N;s:16:"auteur_mod_email";N;s:21:"redacteur_mod_article";N;s:11:"editer_mots";s:1:"1";s:20:"redacteurs_voirstats";N;s:13:"editer_forums";s:1:"0";s:17:"editer_signatures";s:1:"0";s:11:"espace_wiki";N;s:22:"espace_wiki_redacteurs";N;s:21:"espace_wiki_visiteurs";N;s:19:"espace_wiki_anonyme";N;s:28:"espace_wiki_rubrique_anonyme";N;s:10:"configurer";s:0:"";s:11:"sauvegarder";s:0:"";s:8:"detruire";s:0:"";s:23:"interdire_creer_secteur";N;s:23:"interdire_creer_sousrub";N;s:34:"interdire_creer_rub_sauf_webmestre";N;}
Je confirme par ailleurs que la modification :
- pour un admin restreint est possible dans l’espace privé mais pas public
- pour un admin complet est possible dans l’espace public et privé
- CHAMPS SUPPLEMENTAIRES
Voici le code ajouté dans mes_options.php :
Les crayons utilisent l’appel standard
autoriser('modifier', $type, $id)
, mais pour les mots-clés, on faisait dans le core unautoriser('modifier', 'groupemots', $id_groupe)
, pas générique.Il faut donc que tu prennes la version 9565 de SPIP (ou au moins son inc/autoriser.php) pour que ça fonctionne comme tu le souhaites.
euh, en fait, 9566, désolé.
Après de longues recherches, je me suis rappelé que usage est un mot réservé SQL, hors, les noms de colonnes ne sont pas protégés dans crayons, ce qui pourrait expliquer le problème.
Pourrais-tu me confirmer en consultant tes logs mysql, tmp/mysql.log et transmettre l’engueulade probable de mysql ?
Entre temps, je prépare un blindage. Joli bug si c’est ça.
Voilà, tu peux essayer la 12936 de crayons ou le zip de 20H.
Merci pour vos mises à jour, ça marche !
J’ai remplacé ma version de SPIP (1.9.2b) par la version de dev 9573.
Apparemment inc/autoriser.php seul ne suffisait pas, à chaque accès supposé au fichier d’autorisation, on tombait sur la page spip.php avec une erreur HTTP 302 de redirection.
Au final le problème de modification des mots clefs avec Crayons est résolu.
Par ailleurs, la version du plugin Crayons maj par toggg corrige le problème du champ supplémentaire usage dans la table spip_articles.
Merci encore et à bientôt Patrick
PS : le site en cours de construction http://ledechetmatiere.laclasse.com/
En fait, je me suis un peu emballé, il y a encore un problème sur la partie des champs supplémentaires...
Le champ s’ouvre correctement avec Crayons, le contenu est bon mais les maj du texte ne sont pas prises en compte lors de la validation. Pour info j’ai fait une capture des échanges, le contenu renvoyé dans le POST HTTP est celui du champ d’origine inchangé :
{"$erreur":"","wid46765a10801ed3_57854430":"texte1"}
Absolument !
C’est un des endroits où le core est encore un peu bloqué : pour t’en sortir, il faut aller dans
ecrire/inc/modifier.php
et ajouter le nom des champs supplémentaires dans les tableaux qui listent les champs.J’espère qu’on pourra rapidement rendre ça paramétrable « de l’extérieur ».
Finalement, j’ai surchargé ecrire/action/editer_article.php dans plugins/crayons/action/editer_article.php en ajoutant les champs supplémentaires :
Bon tout fonctionne enfin, merci.
J’ai publié une note sur la procédure retenue, si ça vous paraît intéressant, je peux la proposer sur spip-contrib : http://reseau.erasme.org/Des-champs...
Oui, bien vu, les articles sont traités encore séparément ... ton message ici suffit, je pense, jusqu’à ce qu’on offre une méthode standard
Répondre à ce message
Bonjour et merci sur ce super plugin,
J’utilise SPIP 1.9.2b, quand j’installe une version plus récente que la révision 11656 le plugin ne marche plus...si je reviens à la revision 11656 il marche très bien.
Ce plugin en revison 11656 fonctionne très bien chez moi mais pas les revisions plus récentes. Savez vous d’ou peux venir le problème.
Merci.
Je viens de tester 1.9.2b avec la version de ce matin des crayons, et ça marche impec’ chez moi. Peux-tu essayer de bien vider tous les caches et, si ça persiste à ne pas marcher, détailler/donner l’url ? merci
Le cache était bien vidé.
Apparement il faut installer le plugin autorite pour que ce marche.
Est ce que ce que je dis est correct ?
Non :)
Sois plus précis : qu’est-ce qui ne « marche » pas ?
Répondre à ce message
bonjour,
j’ai installé le plug in correctement et le petit stylo apparait.
lorsque je clique dessus, une roue dentée apparait en fin de texte et plus rien ne se passe.
je suis avec le squelette minigrisspip.
je suis débutant sous spip.
au passage impossible aussi de faire fonctionner le plug in documentpdf
merci
marc
Répondre à ce message
lorsque je clique sur le crayon,
j’ai une boite de dialogue qui dit : articles 331 corpsarticle pas de valeur
c’est l’article 331, la class est corpsarticle ... mais quel est le sens de « pas de valeur » et comment corriger ?
Merci à tous !
« pas de valeur » veut dire que la classe transmise ne permet pas de retrouver la valeur de l’objet correspondant. Là, ça ressemble à « article-corpsarticle-331 », typiquement produite par
#EDIT{corpsarticle}
Ici, tu as peut-être mis une classe
#EDIT{corpsarticle}
mais tu n’a pas fourni de controleur correspondant.Il est assez difficile de te répondre sans connaitre un minimum du contexte. As-tu peut-être une url ou peux-tu donner un extrait du squelette de départ, controleur et/ou vue ?
[(#DESCRIPTIF)]
[(#SOUSTITRE)]
voici donc mon squelette, mais je ne vois pas ce que l’on appelle controleu. C’est sans doute de là que viens le hic.
meci de tout coeur,
alexis
pardon ! je reposte car spip à bouffé le HTML !
Salut alexis
ce que tu veux éditer visiblement c’est le #TEXTE, il faut donc utiliser
#EDIT{TEXTE}
.Crayons a des options plus riches pour passer des filtres au « retour », une fois l’édition faite : il faut alors prévoir un squelette spécifique qui refait l’affichage de
[(#TEXTE*|QCM|propre)]
.Si tu veux creuser ça, regarde comment c’est fait pour
image_reduire
, dans le fichiercrayons/vues/article_texte.html
: il y a une ruse de sioux pour repérer les classes complètes de la div, et passer un filtre si elles contiennent une class de la forme imagereduireNNN.Merci fil,
je m’y met de suite.
ALexis
Répondre à ce message
Je suis connecté en tant qu’administrateur principal ;
j’ai mis la balise #EDIT au niveau des messages de FORUM mais rien ne se passe si ce n’est un message m’indiquant que les données sont mal formatées...
Pourtant j’ai créé un fichier mes_options.php :
Mais ca ne change rien.
Quelqu’un peut il m’aider ?
merci
Donne l’url, ou inspire-toi de dist/inc-forum.html
Merci c’est résolu !
C’est SUPER pratique ; ca contourne une des grandes faiblesses de spip !
Par contre, il reste la question d’autoriser l’auteur de l’article ou du forum à éditer son article ou commentaire.
Des solutions existent pour ca ?
Je ne parle pas de donner accès à tout le monde à l’édition, mais seulement l’auteur de l’article ou du commentaire.
Merci !
Pour ça il faut utiliser l’API inc/autoriser ; il n’existe pas encore deplugin bien packagé, mais des morceaux existent ici ou là. Bonne pêche
merci pour ton indication. (Je suis en spip 1.9.2.)
Je suis allé à la pêche.
J’ai trouvé ces élements ci :
http://trac.rezo.net/trac/spip/browser/spip/ecrire/inc/autoriser.php
J’ai bien compris ceci :
°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
API pour une fonction generique d’autorisation :
$qui est : vide (on prend alors auteur_session)
un id_auteur (on regarde dans la base)
un tableau auteur complet, y compris [restreint]
$faire est une action (’modifier’, ’publier’...)
$type est un type d’objet ou nom de table (’article’)
$id est l’id de l’objet sur lequel on veut agir
$opt (inutilise pour le moment) = options sous forme de tableau associatif
(par exemple pour preciser si l’autorisation concerne tel ou tel champ)
Seul le premier argument est obligatoire
°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
Ce fichier semble-il est celui qui détermine les autorisations pour l’édition d’un article. Il est effectivement présent dans le repertoire ecrire/inc/ de mon squelette.
J’ai lu à un autre endroit qu’il fallait indiquer quelque chose dans le fichier mes_options.php afin d’apeler ce fichier. Hélas, je n’ai aucune idée de comment faire.
Quelqu’un accepterait-il de m’aider ?
Si oui, et si ca se dit ici, ca pourrait aider quelques uns à le faire plus facilement.
Merci de votre aide.
Sur le net, il n’y a à ma connaissance aucune indication sérieuse sur la manière de faire avec ce fichier autoriser.php.
J’ai essayé de copier/coller le contenu de ce fichier dans mon fichier mes_options.php (localisé dans le répertoire /config/), mais ca a fait bugger tout mon site. Je suppose donc que ce n’est pas comme ca qu’il faut s’y prendre.
J’espère de tout coeur qu’un pro en la matière acceptera de dire un mot sur la méthode à suivre.
Sois patient, c’est sur la to-do de plein de gens ; mais si tu veux y mettre les mains toi-même, sois plus persévérant ;-)
Regarde du côté de « Gribouille »
Merci Fil, hélas mes compétences sont vraiment trop faibles pour m’attaquer à un truc de ce genre.
Je vais attendre un peu alors :-).
Est-ce bien plus compliqué que d’ajouter que ledit rédacteur peut modifier les champs des articles dont il est auteur ?
Perline : exactement.
Mais ça y est, il y a un plugin dédié à ce genre de choses : cf. Autorité !
Répondre à ce message
Bonjour,
ce plugin marche très bien avec mon squelette, si ce n’est que je perds ma classe texte. tout mon texte est ramassé, sans passage de ligne pour les paragraphes, je perds ma police, taille de caractère, etc... spécifiques à ma classe texte en insérant votre balise de la sorte :
[
]
Avez vous une idée ?
Merci pour vos suggestions !
[(#TEXTE|image_reduire300,0)]
(j’ai rajouté i à div pour que le code apparaisse dans la page...
arf ca passe pas...
j’essaye une derniere fois
diiiiiv classsss= « texte » « #EDIIIITtexte »
la réponse se trouvait juste en dessous, dans ce forum =-)
Répondre à ce message
Bonjour,
je trouve ce plugin génial !
Par contre, j’aimerais éviter de déclancher l’édition de mon texte en double-cliquant sur ce dernier. Est-ce possible d’annuler ce déclanchement mais uniquement déclancher l’édition du texte en cliquant sur l’icone crayon ?
Merci !
Répondre à ce message
je pose une question déjà posée .... quelqu’un aurait-il trouver le moyen de faire apparaitre la barre typo dans l’interface de saisie de l’espace public ?
Merci ;)
Certains prétendent qu’ils l’ont fait, j’ai tendance à les croire, mais je n’ai pas testé personnellement.
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 : |