Actualité
La version 1.11.0 a été publiée le 5 mai 2011.
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’appelleid_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}- 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, les contributeurs sont bienvenus !
crayons.zip
Vos commentaires
# Le 12 décembre 2011 à 18:08, par Sarah
En réponse à : Les crayons
j’utilise le crayon sur la page auteurs pour modifier le profil, mais aussi pour modifier des champs extras liés au profil.
J’ai activé l’option qui permet de « jaunir » la zone crayonnable, et ça marche bien pour les champs extras, mais pas pour les champs du profil.
Une idée d’où ça peut venir ?
# Le 17 janvier à 13:11, par Ben
En réponse à : Les crayons
Salut Sarah,
Effectivement je regardais la même chose.
C’est pareil pour mes titres. Bref, quand ce n’est pas un élément div...
J’ai l’impression que le « yellow_fade » est mis uniquement actif sur les div et est définit dans /plugins/crayons/formulaires/config_crayons.html
Pour moi, ça passait pas dans les champs extra (contrairement à toi) qui étaient en p, mais je les ai passé en div et ça marche à présent.
Ouais, je sais, c’est de la bidouille ;)
A jeudi !
Ben
Répondre à ce message
# Le 28 juillet 2011 à 15:57, par Novispip
En réponse à : Les crayons
Bonjour à tous !
Petite question au sujet de
#EDIT{logo}Lorsque je charge un nouveau logo, la redimension ne me convient pas.
Où régler la taille de redimension du logo ajouté via
#EDIT{logo}?Merci pour l’aide ;)
Cordialement
# Le 29 juillet 2011 à 18:33, par Novispip
En réponse à : Les crayons
Personne pour ce détail ?
# Le 14 septembre 2011 à 01:18, par ?
En réponse à : Les crayons
je n’ai toujours pas trouvé de solution, où règle-t-on la dimension de l’image affichée après chargement d’une nouvelle image via les crayons ?
# Le 17 janvier à 12:32, par Ben
En réponse à : Les crayons
Salut,
Bon, c’est uin peu tard, mais est ce qu’un truc du genre convient ?
[<span class="#EDIT{logo} logo">(#LOGO_ARTICLE||image_reduire{200,200})</span>]Répondre à ce message
# Le 10 décembre 2011 à 22:01, par BERNARDS
En réponse à : Les crayons
Bonjour,
Une grosse incompréhension de ma part ?
En tant qu’administrateur, j’utilise « Crayons » sans problème.
Mais, j’ai déclaré d’autres personnes comme « auteurs ».
Tant que les articles qu’ils créent ne sont pas publiés en ligne, ils doivent rentrer dans la partie « privée » du site pour les modifier.
Seul l’administrateur peut donner le statut d’"article publié" à ces articles.
Il semblerait qu’une fois ces articles publiés, seul l’administrateur puisse les modifier à l’aide de « Crayons ».
Je dois faire une erreur de raisonnement. Merci de la rectifier !
# Le 10 décembre 2011 à 22:18, par Maïeul
En réponse à : Les crayons
ce n’est pas lié aux crayons. Tu constatera que par défaut, les auteurs ne peuvent pas non plus modifier leurs articles depuis l’espace privé.
Il faut que tu change les autorisations. Le plus simple est de passer par le plugin autorité
Répondre à ce message
# Le 10 décembre 2011 à 17:36, par Mist. GraphX
En réponse à : Les crayons
Bonjour,
je rencontre un problème avec Crayon 1.13.2, sur spip 2.1.12 : j’ai toujours à l’enregistrement un message :
article XX intro : Modifié par ailleurs
Désolé, copiez/collez vos changements et recommencez
quelqu’un as t’il eut ce problème ? j’ai mis a jour et décoché tous les plug ins, je teste avec le squelette dist.
Merci de vos réponses
Répondre à ce message
# Le 29 novembre 2011 à 13:22, par hebik
En réponse à : Les crayons
merci pour ce super plugin !
...mais depuis la version 2.xx, j’ai des flash blanc lorsque je navigue sur la partie public en étant connecté (alors qu’en tant que visiteur non connecté, pas de soucis, navigation fluide)
la tout l’écran devient blanc avant de ré-afficher la page, c’est assez désagréable, avec les ancienne versions je n’avais pas ce problème...
je suis le seul ou d’autre ont ce problème ?
ps : j’utilise la dernière version de spip et la dernière version du plugin.
Répondre à ce message
# Le 23 novembre 2011 à 18:53, par bruno31
En réponse à : Les crayons
UPLOAD de documents, c’est GENIAL !
Je viens de découvrir cette fonctionnalité et c’est franchement vers cette voie que SPIP devrait s’engager. Cela simplifie énormément l’ajout de documents en masse. On sélectionne tous ses documents, on drag-drop dans la fenêtre d’édition, et tout les docs sont uploadés en une seule opération. Génial.
Je me permets deux suggestions :
- La position de la fenêtre listant les docs devrait être paramètrable. Sur mon squelette, cela se superpose plus ou moins bien sur du contenu de navigation.
- On devrait pouvoir insérer les balises img, doc, emb dans le texte, simplement en double-cliquant sur l’image ou un exemple de balise dans la fenêtre listant les docs uploadés, ou avec un drag-drop.
MERCI
# Le 23 novembre 2011 à 20:36, par bruno31
En réponse à : Les crayons
Ah oui, j’ai aussi un warning pour chaque image dans la liste déroulante à droite : Warning : Call-time pass-by-reference has been deprecated.
Cela pollue beaucoup la liste. Cela peut-il être corrigé ?
MERCI
# Le 28 novembre 2011 à 17:14, par bruno31
En réponse à : Les crayons
Bon j’ai réglé mon pb de warning avec les options d’affichage des erreurs de PHP.
J’ai implémenté ma suggestion en modifiant le portfolio (inc-documents.html).
Si le visiteur est l’auteur de l’article, j’affiche une petite barre d’outil au début du portfolio. Cette barre permet de choisir la balise (img, doc ou emb), la justification (left, center, right), ainsi que d’autres modèles de mon cru.
Sous chaque image du portfolio, il y a un bouton « Insérer » qui permet d’ajouter la balise d’image à l’emplacement courant du curseur dans l’édition de texte du crayon.
C’est extrêmement pratique, d’autant que le portfolio n’affiche que les images pas encore insérées dans le texte.
C’est un mode de travail vraiment très efficace, lorsque l’on travaille sur de grandes quantité d’images.
Bien sûr, ces boutons sont invisibles pour les visiteurs ou les autres auteurs.
Par contre, je n’ai pas réussi à implémenter un bouton « Supprimer ».
Je suis persuadé que cela pourrait faire l’objet d’une évolution de CRAYON, avec un portfolio intelligent orienté « rédacteur ».
Une autre idée : insérer des boutons sur les images, permettant de les permuter les unes par rapport aux autres, de façon à modifier l’ordre des images.
Répondre à ce message
# Le 6 novembre 2011 à 12:04, par Regis92
En réponse à : Les crayons
Bonjour,
Et MERCI pour ce formidable plugin !
Je suis sur SPIP 1.9.2.m, débutant en CSS, et je souhaiterais faire apparaitre le crayon à la volée non pas en haut à droite de la zone concernée mais en haut à gauche.
Pourriez-vous m’indiquer ce que je dois modifier SVP ?
MERCI D’AVANCE !
Répondre à ce message
# Le 26 octobre 2011 à 17:15, par Maïeul
En réponse à : Les crayons
Salut,
avec la version 1.9.8 des crayons, et SPIP 2.1.10, j’essaie d’activer les crayons sur le champ slogan_site, proposé par le bandeau.
Je met donc
mais rien n’y fait, j’ai n’ai pas de crayons (alors que cela marche nickel pour le contenu).
Une idée ?
merci
# Le 26 octobre 2011 à 17:27, par Fil
En réponse à : Les crayons
il faut aussi bidouiller les autorisations ; a mon sens ca reste un truc a developper proprement dans les crayons, car la ca fonctionne a la rache
Répondre à ce message
# Le 19 août 2011 à 19:25, par popojcb
En réponse à : Les crayons
Crayon et Champs extras !
Bonjour à tous,
Une petite question, sous spip2.1, j’affiche mes champs extras et peut sélectionner les champs extras par le crayons. MAIS à l’édition, le champs de saisie et ne s’affichent pas seul les boutons de validations, voir images jointes.
J’ai fouillé trois heures, mais la réalité est là : sortie de spip et du css je ne rame !!!
Une idée ? Une piste ?
Merci d’avance ;)
ma boucle :
Répondre à ce message
# Le 30 juillet 2011 à 12:47, par mrstern
En réponse à : Les crayons
Bonjour,
je viens de mettre la dernière version de crayons sur mon spip 2.0.
Problème : lorsque je change la configuration dans cfg (par exemple : je coche « barre typo dans les crayons ») et que j’enregistre, il m’indique bien « config info enregistrée » mais il n’en est rien. Tout revient décoché. Je n’avais pas ce pb avec mon ancienne version du plugin.
Une idée ?
mrstern
# Le 4 août 2011 à 03:32, par Sylvain
En réponse à : Les crayons
Même Problème !! (SPIP 2.0.10)
Répondre à ce message