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’ai un petit probleme avec les crayons. Il sne fonctionnent pas si la balise EDIT se trouve dans un fichier « INCLUS ». On peut tester avec les squelettes de la dist :
- Creer un fichier inc-article.html avec dedans la ligne
- dans le fichier article.html, remplacer cette meme ligne par
Qu’est-ce que je ne fait donc pas bien ?
Bonjour Yffic,
Ton inclure n’est pas bon il faut transmettre l’id_article au squelette inclus comme ceci :
Bon courage ++
Oups, oublié les balises code :
<INCLURE{fond=inc-article}{id_article}>
++
Oui comme ca ca marche, mais a condition de refaire une boucle dans le fichier « INCLUS » :
(Solution de Stephane)
J’ai toujours pas bien compris le principe de INCLURE... C’est quand meme assez different du include de php, s’il faut refaire une boucle, non ?
Répondre à ce message
Bonjour,
j’ai un petit soucis avec les crayons, le plugins est téléchargé d’après la dernière version à jour (j’avais auparavant téléchargé celui ci qui fonctionnait très bien en test ).
Actuellement, plus rien ne fonctionne : le crayon n’apparait plus, le dble clik ne fonctionne plus bref nada mais le pire c’est qu’aucun message d’erreur ne peut m’aguiller ....
Et enfin pour info voici ma version de spip : SPIP 1.9.3 dev [9777], le squelette : Alternatives 1.9.2 et les plugins suivants (je sais il y en a bcp mais ca marchait avant (voir post ci-dessous)
Liste des plugins :
J’ai évidemment essayé de les désactiver pour voir (tous il me semble), j’ai même essayé de vider le cache et de supprimer le repertoire temp mais rien n’y fait ...
Serait-ce un problème de droit d’accès ? apporté par la nouvelle version du plug ?
voici par ex la commande dans la page article :
Pour se connecter log ’redacteur’ et pass ’redacteur’ et aller su n’importe quel article
C’est normal d’avoir 2 fois #EDITtexte dans la classe ?
oui tel que marqué dans la contrib ci-dessus (de toute façon même sans ca ne fonctionne pas )
Répondre à ce message
Bonjour
Je viens d’installer le pluggin V0.8 sur un site tout neuf. Et j’ai cette erreur relevee avec WebDeveloppeur dans le fichier spip.php ligne 1696 :
syntax error
[Break on this error] ,cb,false) ;var ok=true ;try if (timedOut) throw\n
spip.php (line 1696)
cfgCrayons is not defined
[Break on this error] var configCrayons = new cfgCrayons(« imgPath » :« plugins/crayons/images »,"droi...
spip.php (line 36)
Les autres pluggins installes :
Acces Restreint 2.0 et cfg
Oui c’est la compression auto de SPIP qui ne marche pas bien avant SPIP 1.9.3 SVN 9717 ; solution provisoire : ouvrir le fichier plugins/crayons/crayons.js.html et supprimer
|compacte_js
.Oui, ca fonctionne mais uniquement avant d’installer le plugin. Sur un site deja existant avec le plugin deja installe, faut faire quoi ? J’ai essaye de desactiver, reactiver, mais ca ne fonctionne pas. Y a t-il une procedure de desinstallation du pluggin ?
salut,
je me pose exactement la même quéstion, il semble qu’il reste des choses même après suppression du plugin.
marc
Attention, comme le fichier javascript final est conservé en cache dans le navigateur, il faut faire attention à vider le cache du site et celui du navigateur.
La révision 13627 des crayons contient son propre packer, ce qui devrait régler ce problème
A noter : elle offre en plus un mode de debug activable en mettant dans l’url :
define('_DEBUG_CRAYONS', true);
ce code ralentit un peu le fonctionnement, puisque le script est rechargé à chaque fois, mais facilite le repérage de bugs et le développement de nouvelles fonctionnalités.
Pardon : ne pas lire « dans l’url » mais « dans
mes_options.php
».Salut
Heu ca veut dire quoi packer ?
Répondre à ce message
Bonjour,
J’ai de la difficulté à faire fonctionner les crayons pour l’url du site d’un auteur. Pour le reste, pas de problème. J’utilise spip 1.9.2b
Dans la boucle auteur, j’identifie, le champ à modifié avec la classe «
#EDIT{url_site}
», mais quand je tente de le modifier, le changement n’est pas enregistré.J’ai aussi essayé «
#EDIT{hyperlien}
», et ça ne fonctionne pas plus.Pourtant, je n’ai aucune difficulté à modifier le nom du site de l’auteur.
Merci !
Je crois que c’est « lien_site » — il faudrait le prendre en compte pour le contrôleur « hyperlien »
Merci, mais non, ça ne fonctionne pas...
Quand j’utilise « hyperlien », j’ai bien la possibilité d’inscrire le nom du site et l’adresse, mais seul le nom est enregistrer.
Répondre à ce message
bonjour
j’utilise ce plugin sous spip 1.9.2b tout fonctionne bien a part que j’ai un petit probleme quand j’edite quelque chose le fond du « formulaire » est noir transparant enfin une couleur bien sombre donc on voit pas grand chose vous avez une solution ??
Merci
aussi je n’arrive pas a activer le crayon dans les messages du forum pourtant j’ai bien ajouter la balise dans mes options
bon j’ai trouver pour les forums j’ai utiliser le plugin autorité par contre si je modifie les messages l’auteur ne change pas car j’ai mis #NOM mais concernant le logo auteur lui il disparait il doit surement etre remplacer par le logo de l’auteur qui a fait l’edition, je ne suis pas sur car l’auteur qui a fait l’edition n’a pas de logo
avez-vous trouvé une solution pour logo auteur ?
Merci
bon je confirme si j’edite le message de quelqu’un son logo et remplacer par le mien est ce vous avez trouver une solution pour ça ??
Merci
C’est une « feature » de SPIP, ça : si on édite un forum on en devient l’auteur. Ca se trouve dans ecrire/inc/modifier.php
pouvez-vous m’indiqué ce qu’il faut modifier car je ne connais pas le php
merci
Tu dois pouvoir commenter la ligne 271 :
spip_query("UPDATE spip_forum SET ip="._q($GLOBALS['ip']).", id_auteur="._q($GLOBALS['auteur_session']['id_auteur'])." WHERE id_forum="._q($id_forum));
(Commenter, c’est-à-dire mettre deux slashes devant :
// spip_query ...
)merci beaucoup ca fonctionne impec
Répondre à ce message
ok, moi aussi j’ai le décalage sous ie (je vais faire les modifs décrites dessous) mais pour info sur les anciennes versions d’ie apparemment cela ne fonctionne pas du tout
en fait voici les modifs pour ie : ver la ligne 30 ( je crois)
(left au lieu de right)
Répondre à ce message
Bonjour,
J’ai une difficulté à utiliser ce Plug-In sur une installation neuve et standard de SPIP 1.9.2b, uniquement sous IE6 PC (et assimilé = maxthon ! mais je n’ai meme PAS installé IE7).
Quand j’ouvre un crayon, la fenetre de saisie apparait, mais en élargissant considérablement la fenetre, avec une marge gauche importante (due à la position du crayon à droite du champ....).
Le problème (du moins pour un ’nouvel’ utilisateur, ce qui AMHA est tout l’interet de ce plug-in inspiré des Wikis) c’est que les deux boutons de .crayon-boutons sont positionnés totalement à droite..(approximativement à 1400 pixels sur un ecran 1024x768) donc invisibles pour l’utilisateur lambda qui reste tout bête devant son formulaire sans savoir comment le refermer !
Et meme quand on « referme » sans modification la page, elle garde une largeur à droite bien plus importante qu’avant le clic lancant le crayon sur l’article..
J’ai bien commencé à lire /plugins/crayons/crayons.css... ;-(
mais j’avoue encore un peu de mal avec les div pour le corriger.....
A suivre......
PS je precise qu’avec FireFox cela marche bien....c’est donc probablement l’une des subtilités d’interpretation de IE..
Bon, j’ai bien une solution, c’est de modifier dans /plugins/crayons/crayons.css la ligne 56 en
.crayon-html .crayon-boutons {
Mais ne serait-ce possible de trouver mieux ?
Et puis si la fenetre de saisie pouvait se remettre plus à gauche (par .resizehandle ?),
ou peut-etre, puis-je suggérer de pouvoir placer les icones de crayons juste AVANT le titre ? mais cela pourrait remettre trop de mise-en-page en jeu ??
A suivre vos meilleures propositions.
PS autre suggestion, s’il était possible de modifier la feuille de style d’impression du site, pour que les TexteAREA de code PHP s’impriment dans leur totalité.... Merci pour ce petit detail..
Répondre à ce message
bonjour,
merci pour le plugin.
J’ai un petit soucis mineur : j’ai activé le plugin et tout fonctionne bien (spip 1.9.3dev + alternatives) cependant le lien pour modifier l’article apparait et fonctionne mais l’image du ’+’ n’apparait pas, comment puis-je modifier cela ?
merci d’avance
Répondre à ce message
Si vous souhaitez utiliser le plugin crayons sur certains articles ouvert à tous ou uniquement aux inscrits, voici une adaptation inspirée du squelette gribouille.
Il suffir de créer deux mots clés, par exemple « Crayonnable » et « Crayonnable_inscrits » puis d’adapter (numéro des mots-clefs) le fichier /config/mes_options.php suivant :
Il faut ensuite associer le mot-clef à l’article que vous voulez ouvrir à tous.
Super idée !
Juste une remarque, pour s’affranchir des constantes représentant les id_mot en question et donc rendre ta contrib portable, pourquoi ne pas passer directement par le titre des mots ?
J’ai aussi tout intégré en une seule requète dans cette variation ...
Merci beaucoup pour ces modifications et surtout ce plugin génial : tous les avantages d’un Wiki dans un site structuré.
Bonjour,
très très bonne idée, mais pour moi la technique proposée par Toggg ne marche pas, et comme je ne m’y connais pas en php, je sais pas pourquoi... Je vous propose donc une methode « batârde » :
Pour moi ça marche
Répondre à ce message
si quelqu’un peut m’aider...
le plugin crayons ne marche pas chez moi.
je suis en 1.9.2b et la roue dentée mouline dans le vide.
le message d’erreur est le suivant :
Erreur : [Exception... « ’Permission refusée d’appeler la méthode XMLHttpRequest.open’ when calling method : [nsIOnReadyStateChangeHandler::handleEvent] » nsresult : « 0x8057001e (NS_ERROR_XPC_JS_THREW_STRING) » location : « » data : no]
une idée ?
Merci d’avance
Marc
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 : |