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
Bonjour,
J’essaye de rendre crayonnable le titre des documents joints à un article par les auteurs du contenu (administrateurs et administrateurs restreints).
Pour les admins, celà marche très bien. Pour les admins restreints pas moyen, celà vient sûrement de la gestion des droits dans le plugin.
J’ai cherché du côté du plugin autorité ou de /ecrire/inc/modifier.php, sans succès.
Quelqu’un saurait-il où chercher pour modifier ces droits ?
Merci
Répondre à ce message
Tiens, une question étant donné que je suis en train de vouloir appliquer quelques nouveaux champs crayonnables à mes squelettes :
Quelqu’un aurait-il des avancées ou des astuces pour pouvoir crayonner un champ vide en table ?
sans avoir testé pleinement, j’ai trouvé une solution passable... ajouter un blanc insécable au contenu de la zone à éditer.
<span #EDIT{champ}>#CHAMP </span>
ou encore
<span #EDIT{champ}>[(#CHAMP|?{' ','#CHAMP'})]</span>
Attention, je n’ai pas validé... mais l’idée est là...
L’inconvénient est que si le champs édité est encore vide, il faudra recharger la page pour avoir accès de nouveau au crayon.
Effectivement, j’arrive à avoir le formulaire d’édition pour les crayons.
Par contre, je n’arrive pas encore à ce qu’il fasse la mise à jour en base ? Je voulais pouvoir crayonner le champ descriptif de la table spip_mots mais bizzarement, alors que tout semble fonctionner, l’enregistrement n’est pas mis à jour !
J’aime bien faire comme suit :
<div class="#EDIT{truc}">[(#TRUC|sinon{double-cliquer pour créer un truc})]</div>
Ha... l’idée et l’élégance y sont... je note... ;o)
J’ai rien dit, ça marche nickel à présent. Et comme déjà dit ou suggéré dans ce forum, VIVA les auteurs de ce plugin.
Donc au final, je pense quand même qu’une de mes erreurs était de mettre #EDITTRUC au lieu de #EDITtruc. C’est sensible à la case ?
Oui !
Répondre à ce message
Pour moi, ceci est une excellente nouvelle. J’ai toujours eu un besoin d’édition des forums (que je fais actuellement via phpmyadmin) pour des besoins de corrections orthographiques.
Juste deux questions, on pourra donc à présent, via ces widgets éditer les messages de forum, c’est bien ça ?
Et niveau autorisation, seuls les admins pourront le faire ? les rédacteurs authentifiés du message aussi ?
Dans tous les cas, je sens que vous avez fait fort avec ce plugin. Merci Fil, merci toggg
En ce qui concerne les forums, je crois que nous finirons par dissocier les droits d’édtion du plugin widgets. Là c’est mélangé pour permettre à tout le monde de tester... Mais au fond, les droits par défaut sur les forums, ça doit rester les mêmes avec ou sans widgets, c’est-à-dire « non ».
En revanche, un plugin qui dit « ok pour les admins », et même « ok pour l’auteur du post, pour une durée maxi de 30 minutes », ce sera bien (et ça devrait être relativement facile à faire avec l’API d’autorisation qui est en train de cuire à feu doux dans le core).
Les droits sur les forums sont désormais dissociés du plugin crayons ; la fonctionnalité est bien là, mais pour l’activer il faut surcharger les fonctions autoriser_forum_modifier (un exemple est donné dans le code des crayons).
ça y est, je tente d’implémenter ce plugin justement permettre les corrections online des forums au moins par moi (admin) ... et plus tard par leurs auteurs (peut-être).
Bref, pour l’instant je tatonne, ce n’est pas concluant.
Dans /plugins/crayon/inc/crayons.php je suppose qu’il faut modifier dans les premières lignes comme suit :
define(’MODIFIER_FORUMS’, true) ;
Dans mon squelette j’ai bien ajouter le #INSERT_HEAD qui rajoute bien le js de JQUERY ... et également un
pour le message de forum.
J’ai également ajouté un controlleur forum_texte.html (alors là, ce n’est que supposition)
et une vue texte.html comme suit :
Je tatonne, je l’ai dit, je tatonne. Pour l’instant ce qui me chagrine, c’est bel et bien que mon
n’est pas résolu ie je me retrouve avec un
Merci d’avance pour votre aide.
Si
#EDIT{texte}
ne donne rien, c’est que tu n’as pas activé le plugin... Active-le, et indique dans mes_options.php (par exemple) :define('MODIFIER_FORUMS', true);
, et ça devrait suffire complètement.A court terme il faut faire un plugin s’occupant d’autoriser les modifications de forum, et sortir la fonction d’autorisation du plugin crayons... y en aura pas pour longtemps, c’est élémentaire à faire.
Pfff, que je suis bête, effectivement, il n’y avait qu’à activer le plugin. Et ça marche vraiment nickel.
Chapeau Fil pour ces crayons, ça me rend un sacré service, à moi comme aux autres rédacteurs de mon site.
Sinon, pour le plugin qui se chargerait de permettre le réglage des autorisations en modif des forums, je ne me sens pas de taille à le faire pour l’instant, mais ça serait probablement un formulaire avec 4 choix :
- 1 - Edition des messages de forum interdite
- 2 - Edition autorisée pour les admins + les auteurs
- 3 - Edition autorisée pour les admins seuls
- 4 - Edition autorisée pour les auteurs seuls
Je viens juste de l’essayer . Génial ! Cela facilite grandement les modifications.
Et les explications de cet article sont bien claires. Merci
B.Poiraud
Bonjour,
je suis un utilisateur des crayons depuis la version 0.6 que j’utilisais notamment pour modifier l e contenu des forums de mon site (en utilisant define(’ MODIFIER_FORUMS ’, true).
Hélas, j’ai mis à jour le plugin (0.9.) mais je n’arrive plus à crayonner mes forums.
Avez vous une idée ?
Merci !
Dire qui a le droit de modifier quoi, c’est désormais le rôle de plugin Autorité.
Excellent, c’est résolu !
J’avais entendu parler du plugin Autorité, mais j’avais cru comprendre qu’il ne fonctionnait (en grande partie) qu’à partir de spip 1.9.3. donc je ne l’avais pas installé...
Mais ca fonctionne !
MERCI ;)
Répondre à ce message
Bonjour j’ai installé le plugin crayon.
Version : 0.9 | stable pour SPIP 1.9.2.
IL n’est accessible sur la partie public uniquement que pour les administrateurs. Est-ce normal ? Je ne vois pas quoi modifier pour étendre ces droits aux rédacteurs ou l’idéal pour moi aux visiteurs.
L’un d’entre vous a t’il déjà résolu ce type de problème ?
Merci.
Il faut associer le plugin « Autorité » pour pouvoir étendre les droits d’édition sur la partie public avec les Crayons pour les non administrateurs.
Répondre à ce message
Voici une astuce de Fil qui permet de recharger les crayons dans un « callback » ajax, c’est à dire après qu’on a rechargé un fragment de page.
1) rajouter la class « reload », par ex :
2) dans le « callback » rappeller les crayons
Répondre à ce message
La dernière version du plugin « crayons » (en téléchargement sur Spip_zone, datée du 26-Jan-2008 et notée « 0.9 » dans le XML) ajoute une nouvelle option (par CFG) qui permet d’activer ou non la barre typographique de SPIP (à noter : la précédente version était également numérotée « 0.9 » et n’offrait pas cette possibilité)
Cette option est intéressante, mais si le plugin « Barre typo v2 » est activée (ce qui est le cas sur de nombreux SPIP que j’administre) :
- la barre typo s’affiche, même si la case est décochée dans CFG,
- un bogue important se produit dès qu’on manipule l’ascenseur, puisque (quel que soit le squelette, même celui de la DIST) le contenu de la page d’accueil s’affiche en surimpression, masquant la zone à modifier (tous navigateurs Windows - FireFox, Opera, Safari - , sauf IE qui rame sans rien faire...) ;
- en désactivant « Barre typo v2 », le problème disparaît, et la barre typo SPIP s’affiche ou est absente selon la coche de CFG.
- par ailleurs, la zone modifiable est réduite au minimum sur FireFox (au lieu de prendre la largeur de la DIV)
J’ai remis la précédente version du plugin (sans la barre typo) est tout est rentré dans l’ordre... mais j’ai bien besoin des 2 plugins... qui ont chacun leur utilité indéniable...
Est-ce un problème déjà noté ? Est-il résolu en SVN ?
Merci d’avance,
Je suis dans le même cas de figure et je constate les mêmes dysfonctionnements. En conséquence je suis revenu à la version 15114 des crayons, quitte à ne pas disposer de la barre Typo V2 dans l’espace public. Dommage mais intéressant tout de même.
J’ai les memes soucis, avec ou sans la Barre Typo V2 installée. Ou peut-on télécharger la version précédente qui semble fonctionnelle ?
J’avais un bug à l’affichage c’est donc un problème avec barre typo V2, un correctif suivit d’une annonce serait bienvenue
Répondre à ce message
Bonjour à tous et encore merci pour ce merveilleux plugin
Tout fonctionne très excepté quand je veux écrire un w en lettre minuscule cela ferme la fenêtre d’édition et sauve ce que j’ai fait avant.
Ce n’est pas le cas pour un W majuscule.
quelqu’un a t il une idée là-dessus ?
Cdt
Damien
Peux-tu nous dire quel navigateur fait ça, sur quel OS ? Pour creuser il faut pouvoir débugguer, et donc reproduire le bug. Car ça ne le fait pas « chez moi » avec Safari, Firefox ou IE.
Bonjour,
cela le fait sous ie et firefox.
Pour information voici les plugins déjà installé :
Lecteur Multimédia en Flash (MP3,flv)
Boutons dans le Texte
cfg : moteur de configuration
Crayons
Escoitar Gis Plugin
GoogleMap Api
Menus deroulants
Squelette editeur
Thickbox v2
Connaissez vous une incompatibilité avec ces plugins ?
Cdt
Damien
Avec firefox sous linux j’ai le même problème par exemple avec le « ñ » et de manière générale quand je veux garder les modifcations le navigateur essaie de charger la page qui reste en blanche. (et la ñ n’est pas écrite). Je dois recharger la page à la main
Avec Opera sous linux je n’arrive pas à ouvrir le champ de modification, le petit icone d’ajax tourne sans que rien ne se passe
(je suis avec spip 1.9.2c)
Pour la ñ, peux-tu vérifier si tu as le même problème dans l’espace privé de SPIP ?
Dans l’interface privé je n’ai aucun problème avec aucun caractère. Le même phénomène se peut constater également avec les accent grave.
De toute façon, et cela n’importe la modification fait et les caractères utilisé. Après avoir
mois ok, apparait une message demandant si tu veux « navigate away from this page » (chez Firefox) si tu met oui apparait un page blanche blanche qui essaie de se charger, mais n’arrive pas. Si je met annuler, je reviens sur la page avec la modification enregistré.
Finalement je crois que le problème vient d’une incompatibilité avec Barre Typo V2 (2.4.1 )
Si je la désactive tout revient à la normale
Rainer
Répondre à ce message
Bonjour,
pour un usage spécifique à mon site, je voudrais pouvoir éditer un champ de la table SPIP_MOTS_DOCUMENTS. Il s’agit d’un champ de type TEXT que j’ai rajouté, nommément, le champ « titre » (un champ de TEXT).
Voici ma boucle :
< BOUCLE _ test ( SPIP_MOTS_DOCUMENTS ) par titre >
< div class =" # EDIT titre text" > # TITRE < / div >
< / BOUCLE_ test >
Hélas, le champ n’est pas éditable.
dois je rajouter une fonction dans le fichier mes_options se trouvant dans le dossier CONFIG de spip ?
Si oui, à quoi devrait ressembler cette fonction ?
en espérant de tout coeur que vous pourrez m’aider.
Merci
J’ai essayé de mettre ceci dans mon fichier mes_options situé dans le dossier de mon squelette, hélas ca ne fonctionne pas du tout :
include_ spip (’base/ serial’ ) ;
$GLOBALS [’tab les_principales’][’spip _mots_documents’][’f ield’ ] =
array _merge ( $ GLOBALS [’tables_principales ’][’spip_mots_docume nts’][ ’field’],
array (’titre ’ => « text NOT NULL ») ) ;
J’espere que quelqu’un pourra m’aider.
un petit up. Quelqu’un aurait il une idée ?
merci beaucoup
Pas de solution ?
ou bien c’est trop trivial ?
Dernier up.
Si personne ne veut ou peut me renseigner directement. Y aurait il une documentation sur ce sujet ? J’ai cherché mais rien trouvé.
Merci de tout coeur.
cedric
Répondre à ce message
Bonjour,
La fonction crayon n’a pas fonctionné chez moi pour modifier le type de mot clé dans la page de mot clé.
J’ai inséré le code
<h1 class="#EDIT{type} type">#TYPE</h1>
sans succès .
Merci de vos réponses.
Les groupes de mots sont gérés de manière un peu différente : le champ spip_mots.type n’est pas la « vraie donnée », c’est id_groupe qui compte. Il faudra que tu écrives un contrôleur spécial qui affiche un menu
<select>
des groupes disponibles. N’oublie pas de nous le signaler ensuite, qu’on l’intègre au projetRépondre à ce message
Bonjour
lorsque je double-clique sur un texte, l’icone crayon etant affichee, la roue qui tourne apparait mais le formulaire ne s’affiche pas. J’ai un message d’erreur Firebug :
invalid flag after regular expression
[Break on this error] Warning : uniqid() expects at least 1 parameter, 0 given in d :\sites\a...
Spip 1.9.2c, crayons 0.9 de ce jour recuperee par svn rev 17349. Firefox a jour.
Une idee ?
La révision 17352 devrait corriger ce problème ; merci !
Ca fonctionne, c’est moi qui te remercie, Fil
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 : |